Ionic 3.X: virtual scroll with infinite scroll (i.e. changing a dataset)

Question

I use the version of "ionic-angular": "3.2.1", but after some scrolls the virtual list shows the next blank screen.

I tried the following code.

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

here is the corresponding ts file code:

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

• trackProduct does not receive a call.

I also tried without the virtualTrackBy directive, but nothing works.

Can anyone help me?

Answer 1

You need to use 'products | async' if 'products' receive content from the server, for example firebaselistobservable. With a regular array, virtualTrackBy is never called.