[英]How to use trackBy on AsyncPipe with images rendering, it re- renders page every time?
My question is how to use trackby on Async pipe with images rendering under it. 我的问题是如何在异步管道上使用Trackby及其下的图像渲染。
I have done following. 我已经做了以下。 in html
在HTML
<div *ngFor="let friend of friends$ | async;trackBy:trackByFn"> <img [src]="friend.image"> </div>
and in my component.ts 在我的component.ts中
trackByFn(index, item) {
if(!item) return null;
return item && item.id; // or item.id
}
Now problem is that i have a timer of 2 minutes after that i push new elements to friend$ observable using next statement 现在的问题是我有一个2分钟的计时器,之后我将新元素推送到friend $,可使用下一条语句进行观察
this.friends$.next(data);
everytime i do that i can see request for all images. 每次我这样做时,我都能看到所有图像的请求。 And blink effect on every image why?
并在每张图像上闪烁效果为何? i am using track by to do not rerender dom elements.
我正在使用跟踪不重新呈现dom元素。
You are pushing a whole new dataset everytime. 您每次都在推送一个全新的数据集。 Try pushing only a new value to your observable, and treat your subject like an array :
尝试仅将新值推入可观察值,并将您的主题视为数组:
friends$ = new BehaviorSubject([]); friends $ =新的BehaviorSubject([]);
add(value) {
this.friends$.pipe(take(1)).subscribe(items => {
items.push(value);
this.friends.next(items);
});
}
This should automatically resolve your issue, without the need of a track by function. 这将自动解决您的问题,而无需按功能进行跟踪。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.