时间戳

首页 > 解决方案 > 如何防止元素在数据更新时每隔一段时间在每个 API 调用上闪烁

angular - 如何防止元素在数据更新时每隔一段时间在每个 API 调用上闪烁

问题描述

从 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>

任何帮助将不胜感激 ：）

标签： angularionic-frameworkrxjssetinterval

解决方案

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

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

在 .ts 文件中：

itemHeightFn(item, index) {return 182;}

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

希望它可以帮助某人！

推荐阅读