避免以角度在[src]中重新加载图像

您需要使用 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
}

这将阻止在DOM中创建元素的角度。

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

您必须将单个用户对象更新为重新分配用户数组以刷新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*/ 
           }
        }
      })