角度绑定到视图上的函数会导致对数据服务的无限调用

Question

我正在尝试将src图像的属性绑定到如下所示的ngFor指令中：

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

imageSrc组件内部的方法如下所示：

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

  this._imageService.getImage(imageId)
  .subscribe(image => {
    imgSrc = hostUrl + image.url
   });
  return imgSrc;
}

中的getImage函数Injectable ImageService如下所示：

getImage(id: string) {
  var _imageUrl = "http://192.168.0.101:3000/images/"+id;
  return this.http.get(_imageUrl)
  .map(res => <Image>res.json().data)
  .catch(this.handleError)
}

问题是，只有两个imageIds的*ngFor指令呈现两个列表项为预期（但没有图像显示），但在调用数据服务不会停止，它得到了什么似乎是一个无限循环结束，两个图像直到应用程序崩溃。我做错了什么？

Answer 1

我不认为这与*ngFor. 如果您从视图绑定到一个函数，那么每次 Angular 运行更改检测时都会调用此函数，默认情况下，在页面上发生的每个事件上都会调用该函数。

在devMode（与 相反prodMode）更改检测中甚至为每个事件运行两次。

将结果存储在一个属性中并绑定到该属性，或者如果输入参数 ( id:string) 自上次调用以来没有更改，则至少在后续调用中从您的函数返回一个缓存的结果。

例如，如/sf/answers/2540417701/所示