如何在AsyncPipe上使用trackBy进行图像渲染，每次都重新渲染页面？

Question

我的问题是如何在异步管道上使用Trackby及其下的图像渲染。

我已经做了以下。 在HTML

 <div *ngFor="let friend of friends$ | async;trackBy:trackByFn"> <img [src]="friend.image"> </div> 

在我的component.ts中

trackByFn(index, item) {
    if(!item) return null;
    return item && item.id; // or item.id
}

现在的问题是我有一个2分钟的计时器，之后我将新元素推送到friend $，可使用下一条语句进行观察

 this.friends$.next(data);

每次我这样做时，我都能看到所有图像的请求。 并在每张图像上闪烁效果为何？ 我正在使用跟踪不重新呈现dom元素。

Answer 1

您每次都在推送一个全新的数据集。 尝试仅将新值推入可观察值，并将您的主题视为数组：

friends $ =新的BehaviorSubject（[]）;

add(value) {
  this.friends$.pipe(take(1)).subscribe(items => {
    items.push(value);
    this.friends.next(items);
  });
}

这将自动解决您的问题，而无需按功能进行跟踪。