angular - 避免在 Angular 的 [src] 中重新加载图像

Question

我有一个应用程序，它显示带有个人资料图片的用户列表。
当我更新此用户的值时，图像会重新加载，因为可观察列表再次发出所有数据。
我怎样才能避免这种情况？

<div *ngFor="let user of users">
<img [src]="user.profilepic"/> {{user.name}} <button (click)="updateUser(user)">Update</button>
</div>

TS:

this.userProvider.getUserList()
      .distinct()
      .subscribe(data => {
        this.users = data
      })

我希望这个 distinct() 函数能完成这项工作，但没有成功..
该应用程序是使用 ionic 3 结合 firebase 实时数据库数据和使用公共(public) url 下载的 firebase 存储图片制作的
编辑
3年后，我在另一个应用程序中面临同样的问题......
每次从我的 Observable 中进入时，图像都会闪烁(所以我认为它会刷新？)

Answer 1

您需要使用 trackBy .

<div *ngFor="let user of users; trackBy: trackBy">
    <img [src]="user.profilepic"/> {{user.name}} <button (click)="updateUser(user)">Update</button>
</div>

然后在您的组件中定义:

public trackBy(index, user) {
    return user.id; // or any other identifier
}

这将阻止 Angular 在 DOM 中创建元素。