ionic 3.X：具有无限滚动的虚拟滚动（即更改数据集）

Question

我正在使用 "ionic-angular": "3.2.1" 版本，但虚拟列表在滚动后显示以下空白屏幕。

我尝试了以下代码。

<ion-content padding>
    <ion-list [virtualScroll]="products" approxItemHeight="100px" [virtualTrackBy]="trackProduct">
        <ion-item category-item *virtualItem="let product" (click)="viewProduct(product)">
            <img product-image src="some_url.png" />
            <div prduct-description ellipsize>
            <div product-name ellipsize>{{product.productName || "" | uppercase}}</div>
                <div product-sku ellipsize>SKU# : {{product.sku}}</div>
                <div price>${{product.price}}/Case</div>
            </div>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px" #infiniteScroll>
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

这里是相关的ts文件代码：

 /**
  *  This method will be used for virtual scroll.
  * @param index 
  * @param product 
  */
  trackProduct(index, product: Product) {
    console.log(index, product);
    return product.productId;
  }

• trackProduct 没有被调用。

我也尝试过不使用 virtualTrackBy 指令，但没有任何效果。

谁能帮帮我？

Answer 1

您需要使用“产品 |如果 'products' 从像 firebaselistobservable 这样的服务器获取内容，则使用 async' 管道。使用普通数组 virtualTrackBy 永远不会被调用。