如何在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);

我每次都可以看到所有图像的请求。并在每张图像上闪烁效果为何？ 我正在使用track by来不重新渲染dom元素。

Answer 1

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

friends $ = new BehaviorSubject（[]）;

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

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