javascript - 如何防止 *ngFor 更新 Angular 4 中的 DOM？

Question

在 Angular 4 中，我使用 *ngFor 来显示一些图像

<div  *ngFor='let image of images;let i = index'>
    <img  [src]="'/assets/Images/'+image+'.png'" *ngIf="!tohide(i,0);">
</div>

*ngFor 第一次完成后，我希望通过 *ngIf 删除特定图像，而不更改数组“图像”。问题是每当我使用函数“tohide”删除图像时，*ngFor 再次绑定(bind)到“图像”并更新图像集。

In other words, is there a way to force *ngFor to not to listen to the array 'images' occasionally?

Answer 1

*ngFor 默认有一个 track by function，在你的情况下，你想覆盖它。

<div  *ngFor='let image of images;let i = index; trackBy: myTrackByFunction'>
  <img  [src]="'/assets/Images/'+image+'.png'" *ngIf="!tohide(i,0);">
</div>

在你的 TS 中

myTrackByFunction(index, item) {
  return index; // or item.id, if your image has an ID
}

欲了解更多信息，see this web page