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

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