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

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

本文关键字：数据 服务 调用 无限 视图 函数 绑定      更新时间：2023-09-26

我正在尝试将图像的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;
}

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指令会按预期呈现两个列表项（但没有显示图像），但对数据服务的调用并没有停止，它会在一个看似无限循环的过程中反复获取这两个图像，直到应用程序崩溃。我做错了什么？

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

在devMode中（与prodMode相反），变化检测甚至对每个事件运行两次。

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

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

相关文章：