Как использовать trackBy в AsyncPipe с рендерингом изображений, он каждый раз перерисовывает страницу?

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 минуты, после чего я отправляю новые элементы другу $ observable с помощью следующего оператора

 this.friends$.next(data);

каждый раз, когда я делаю это, я вижу запрос на все изображения. И эффект моргания на каждом изображении почему? я использую трек, чтобы не перерисовывать элементы dom.

Answer 1

Вы каждый раз вводите новый набор данных. Попробуйте выдвинуть только новое значение для вашей наблюдаемой и обработайте ваш объект как массив:

друзья $ = новый BehaviorSubject ([]);

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

Это должно автоматически решить вашу проблему, без необходимости отслеживания по функциям.