代码之家 › 专栏 › 技术社区 › RobrechtVM

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

angular2-observables observable rxjs firebase angular

10

RobrechtVM · 技术社区 · 7 年前

我有一个应用程序,它显示了一个带有个人资料图片的用户列表。当我为这个用户更新一个值时,图像会被重新加载,因为可观察列表会再次发出所有数据。我如何避免这种情况?

<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实时数据库数据和firebase存储图片(通过公共url下载)组成

编辑

3年后,我在另一个应用程序中面临同样的问题。。。每次从我的可观察到的东西进来时,图像都会闪烁(所以我假设它会刷新?)

3 回复 | 直到 4 年前

1

8

Roy 4 年前

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

2

0

Aniket Shahane 4 年前

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

3

-1

Sachin Panchal 4 年前

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