javascript - Angular 绑定(bind)到 View 上的函数会导致对数据服务的无限调用

Question

我试图在 ngFor 指令中绑定(bind)图像的 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 无关。如果你从 View 绑定(bind)到一个函数，那么每次 Angular 运行变化检测时都会调用这个函数，默认情况下，在你的页面上发生的每个事件。

在 devMode(与 prodMode 相反)中，更改检测甚至针对每个事件运行两次。

将结果存储在属性中并绑定(bind)到该属性，或者如果输入参数 (id:string) 自最后一次通话。

例如https://stackoverflow.com/a/36291681/217408中所示