Angular: (ngFor) 当我移除一个项目时如何防止它重新加载？

Question

I have a list of images in my page:

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

The problem is that, every time I remove a picture, the previous list is recreated and all the images are reloaded. How can I prevent it from reloading the images when I remove an item? Is there any alternative for the ngFor directive?

Answer 1

Use trackBy as explained here

We can help Angular to track which items added or removed by providing a trackBy function. The trackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item. Now when you change the collection, Angular can track which items have been added or removed according to the unique identifier and create or destroy only the things that changed.

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

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