如何防止 *ngFor 更新 Angular 4 中的 DOM？答案

【问题标题】：How to prevent *ngFor from updating the DOM in Angular 4?如何防止 *ngFor 更新 Angular 4 中的 DOM？
【发布时间】：2018-01-09 09:20:20
【问题描述】：

在 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 删除特定图像，而不更改数组 'images'。问题是每当我使用函数“tohide”删除图像时，*ngFor 再次绑定到“图像”并更新图像集。

换句话说，有没有办法强制 *ngFor 不偶尔收听数组 'images'？

【问题讨论】：

你的 tohide() 函数是做什么的？你能发布相同的代码
不能在渲染item之前修改数组吗？
tohide() 函数中有什么？
你应该改变你的数组而不是创建一个新数组。如果你愿意，那么 Angular 将重新渲染数组。你能把你的 ts 代码贴在这里，然后我可以提供更好的帮助。

标签： javascript angular ngfor

【解决方案1】：

*ngFor 默认情况下有一个跟踪功能，在你的情况下，你想覆盖它。

<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

【讨论】：

【解决方案2】：

你可以在你的数组中指定另一个名为“removed”的属性：False，然后使用它：

<div  *ngFor='let image of images;let i = index'>
<img  [src]="'/assets/Images/'+image+'.png'" [hidden]="i.removed">

当你想删除一个项目而不真正从数组中删除它时，只需将“removed”属性设置为 True。

【讨论】：

【解决方案3】：

您可以使用以下作为解决此问题的适当方法之一：

您可以通过添加一个名为removed 的属性来跟踪每个图像对象的删除状态，最初设置为false。
然后您使用*ngFor 实施过滤器（如here 所述）以过滤掉图像。
删除图像时，将removed 标志设置为true。这将过滤掉删除的图像。

编辑：trackBy 是 *ngFor 的另一个参数，您可以使用它来代替开发单独的过滤器。如果您需要，过滤器将为您提供额外的控制和功能。

希望这会有所帮助！

【讨论】：