如何在数据更新时防止元素在每个 API 调用中闪烁

Question

从 API 调用中获得的 JSON 数组应该显示在使用 ionic 5 和 Rxjs 的卡片中。 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>

任何帮助将不胜感激:)

Answer 1

您可以添加 distinctUntilChanged 运算符以防止任何不必要的 DOM 更新。 https://www.learnrxjs.io/learn-rxjs/operators/filtering/distinctuntilchanged

Answer 2

您可以使用 Angular 的 "trackBy" 函数来实现： https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

ion-virtual-scroll 的文档中也提到了这一点： https://ionicframework.com/docs/api/virtual-scroll#changing-dataset-should-use-trackby

Answer 3

最后通过添加 itemHeight 修复了它，因此 html 文件中的代码将是：

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

在 .ts 文件中：

itemHeightFn(item, index) {return 182;}

因此，虚拟卷轴在更新时不会使项目闪烁。它解决了我的问题，因为我所有的物品都具有相同的高度。

希望对大家有所帮助！

如何在数据更新时防止元素在每个 API 调用中闪烁

How to prevent elements from blinking on each API call in an interval while data is updating

setinterval

rxjs

ionic-framework

angular