Ionic 5 虚拟滚动创建空白空间而不是新项目答案

【问题标题】：Ionic 5 Virtual scroll creates blank space instead of new itemIonic 5 虚拟滚动创建空白空间而不是新项目
【发布时间】：2020-10-08 13:17:45
【问题描述】：

我正在尝试使用 ion-virtual-scroll 呈现列表，但是当我动态更新列表时，它不会显示新项目并创建空白区域，但是当我检查滚动时，该项目存在于列表中CSS 属性“transform: translate3d(0px, -9999px, 0px);”

   <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
    <ion-virtual-scroll [items]="listedLoadedPlaces"

    >
      <ion-item

        [routerLink]="place.id"
        detail
        *virtualItem="let place"
      >
        <ion-thumbnail slot="start">
          <ion-img [src]="place.imageUrl"></ion-img>
        </ion-thumbnail>
        <ion-label>
          <h2>{{place.title}}</h2>
          <p>{{place.description}}</p>
        </ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ion-col>

【问题讨论】：

标签： typescript ionic-framework ionic4 angular8

【解决方案1】：

遇到此问题或类似问题的任何人都可能想尝试运行checkRange 或checkEnd 这些由IonVirtualScroll 提供的api，将最后一个项目或指定项目标记为脏，以触发该项目的全新渲染。

在离子角度项目中，它看起来像这样。

template: <ion-virtual-scroll #listedLoadedPlacesScroll [items]="listedLoadedPlaces">
           <ion-item........

component:
  @ViewChild('#listedLoadedPlacesScroll', null) listedLoadedPlacesScroll: IonVirtualScroll;

.....
functionToUpdateList(): void {
   this.listedLoadedPlaces.push(newItem);
   this.listedLoadedPlacesScroll.checkEnd();
}

如果您只需要更新不是源数据数组中最后一项的特定项目，您将使用checkRange

template: <ion-item
        [routerLink]="place.id"
        detail
        *virtualItem="let place; let index = index;"
        (click)="doSomething(place, index)"
      >

component:
    doSomething(place, index): void {
      ..do something to place...
      this.listedLoadedPlacesScroll.checkRange(index, 1);
}

在checkRange 中，您指示IonVirtualScroll 元素将索引处的项目标记为脏，第二个参数是len for length，它是包括当前项目在内的多少项目标记为脏。 SO len = 3 表示 index, index + 1, index + 2 在这些位置的项目将被标记为脏并进行新的渲染。

我遇到了一个问题，即更改视图中的项目需要更改视图之外的项目，解决方案是将所有项目标记为脏checkRange(0, items.length)，这可能很优雅，但现在可以正常工作。

【讨论】：