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

Question

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

<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;
}

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

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 相反）更改检测甚至为每个事件运行两次。

将结果存储在属性中并绑定到那个属性或者至少 return 如果输入参数 (id:string) 自上次调用以来没有改变。

例如

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

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

javascript

angular2-directives

angular2-services

angular