避免在 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 实时数据库数据和使用公共 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 中创建元素。