How to use trackBy on AsyncPipe with images rendering, it re- renders page every time?

Question

My question is how to use trackby on Async pipe with images rendering under it.

I have done following. in html

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

and in my 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

 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.

try to change your `trackByFn` to return all to true and see if it renders back — John Velasquez, Jan 14 '19 at 08:23

score 0 · Answer 1 · answered Jan 14 '19 at 08:23

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([]);

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.

1 Answers1