Angular：（ngFor）当我删除一个项目时如何防止它重新加载？

Question

我的页面中有一个图像列表：

<img *ngFor="let picture of pictures" [src]="picture.path">

问题是，每次删除图片时，都会重新创建以前的列表并重新加载所有图像。当我删除项目时，如何防止它重新加载图像？ngFor 指令有其他选择吗？

Answer 1

按照此处的trackBy说明使用

我们可以通过提供 trackBy 函数来帮助 Angular 跟踪添加或删除的项目。trackBy 函数将索引和当前项目作为参数，并需要返回该项目的唯一标识符。现在，当您更改集合时，Angular 可以根据唯一标识符跟踪已添加或删除的项目，并仅创建或销毁已更改的项目。

<img *ngFor="let picture of pictures; trackBy: trackImageId" [src]="picture.path">

trackImageId(index: number, picture: PictureModel) {
        return picture.id;
    }