避免在 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

您必须将单个用户对象更新为重新分配用户数组以刷新 html

this.userProvider.getUserList()
      .distinct()
      .subscribe(data => {
        if(!this.users) {
         this.users = data
        }
        else {
           for(let user of data) {
                 /* TODO find the user in this.users array & updated required properties, if user not found add it to this.users array*/ 
           }
        }
      })

Answer 2

您需要使用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 中创建元素。

Answer 3

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

我假设...成功更新后，您正在尝试再次获取所有用户列表

updateUser(user){
//after the successful update
        this.userProvider.getUserList()
              .distinct()
              .subscribe(data => {
                this.users = data
             })
}

而不是获取成功的更新...您可以只更新列表中的一个用户（更新后的用户）

updateUser(user){
    //after the successful update

    this.userlist.find(a=> a.id== user.id).name = user.name;

    //can update whatever field you have uoadated
}

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

Avoid image reload in [src] in Angular

angular

firebase

rxjs

observable

angular2-observables