jonowe 3.X: wirtualny zwój z nieskończonym przewijaniem (tj. Zmiana zestawu danych)

Question

Używam "jonowo-kątowej": "3.2.1" wersja, ale wirtualna lista pokazuje następujący pusty ekran po niektórych zwojach.

Próbowałem wykonując kod.

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

tutaj jest istotne ts kodzie pliku:

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

• trackProduct nie nazywa uzyskiwanie.

Próbowałem również bez dyrektywy virtualTrackBy, ale nic nie działa.

Czy ktoś może mi pomóc?

Answer 1

Należy użyć "produktów | async 'pipe, jeśli' products 'pobiera zawartość z serwera takiego jak firebaselistobservable. Z normalną tablicą virtualTrackBy nigdy nie jest wywoływana.