Как предотвратить мигание элементов при каждом вызове API во время обновления данных

Question

Массив

A JSON, полученный из вызова API, должен отображаться на картах с использованием ioni c 5 и Rx js. API вызывается каждые 5 секунд, поэтому данные будут меняться при каждом вызове. Проблема в том, что при каждом вызове целые карты восстанавливаются и выглядят как пользователь. Вот как я вызываю API:

interval(1 * 5 * 1000)
.pipe(
    flatMap(() => this.myService.getList())
)
.subscribe(res => {
  if(res){this.list = res.history;}
})

В файле html данные отображаются на карточках с использованием «ion-virtual-scroll», как показано ниже:

<ion-virtual-scroll [items]="list" approxItemHeight="132px">
  <ion-item *virtualItem="let q">
    <!-- cards will go hear -->
  </ion-item>
</ion-virtual-scroll>

Любая помощь будет оценена :) 1007 *

Answer 1

Вы можете использовать функцию Angular trackBy для достижения этой цели: https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

Это также упоминается в документации для ion-virtual-scroll: https://ionicframework.com/docs/api/virtual-scroll#changing -dataset-должен потребительная trackby

Answer 2

Наконец, это было исправлено путем добавления itemHeight, поэтому код в файле html будет иметь вид:

<ion-virtual-scroll [items]="filteredList" approxItemHeight="152px" [itemHeight]="itemHeightFn"> ...

, а в файле .ts:

itemHeightFn(item, index) {return 182;}

Итак, виртуальная прокрутка не заставляет элементы мигать при обновлении. Это решило проблему в моем случае, так как все мои предметы имеют одинаковую высоту.

Надеюсь, это кому-нибудь поможет!

Answer 3

Вы можете добавить оператор distinctUntilChanged, чтобы предотвратить любое ненужное обновление DOM. https://www.learnrxjs.io/learn-rxjs/operators/filtering/distinctuntilchanged