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;
    }