Optimus Pette Optimus Pette - 1 year ago 114
Javascript Question

Angular 2 Binding to a function on the view results to infinite calls to the data service

I'm trying to bind a

attribute of images inside an
directive that looks like this:

<div *ngFor="imageId of imageIds">
<img [attr.src]="imageSrc(imageId)" alt="{{imageId}}">

method inside the component looks like this:

imageSrc(imageId: string){
var hostUrl = "";
var imageUrl = hostUrl+"images/"+imageId;
var imgSrc = "";

.subscribe(image => {
imgSrc = hostUrl + image.url
return imgSrc;

function in the
looks like this:

getImage(id: string) {
var _imageUrl = ""+id;
return this.http.get(_imageUrl)
.map(res => <Image>res.json().data)

The problem is, with only two
directive renders the two list items as expected (but no images displayed) but the call to the data service doesn't stop, it gets the two images over and over on what appears to be an infinite loop until the application crashes. what I'm I doing wrong?

Answer Source

I don't think this is related to *ngFor. If you bind from the view to a function then this function is called every time Angular runs change detection which is by default on every event that happens on your page.

In devMode (in contrary to prodMode) change detection even runs twice for each event.

Store the result in a property and bind to that property instead or at least return a cached result from your function on subsequent calls if the input parameter (id:string) hasn't changed since the last call.

For example like shown in http://stackoverflow.com/a/36291681/217408