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

【问题标题】：How to use trackBy on AsyncPipe with images rendering, it re- renders page every time?如何在 AsyncPipe 上使用 trackBy 进行图像渲染，它每次都重新渲染页面？
【发布时间】：2019-06-08 05:15:38
【问题描述】：

我的问题是如何在 Async 管道上使用 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 分钟的计时器，然后我使用 next 语句将新元素推送到可观察的朋友 $

 this.friends$.next(data);

每次我这样做时，我都可以看到对所有图像的请求。并且每张图片都有闪烁效果，为什么？我正在使用 track by 来不重新渲染 dom 元素。

【问题讨论】：

尝试更改您的 trackByFn 以将所有内容返回为 true 并查看它是否返回

标签： angular ngfor angularjs-track-by

【解决方案1】：

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

friends$ = new BehaviorSubject([]);

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

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

【讨论】：