आयनिक 3.X: असीमित स्क्रॉल के साथ आभासी स्क्रॉल (यानी डेटा सेट बदलना)

Question

मैं "आयनिक-कोणीय" का उपयोग कर रहा हूं: "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 नहीं बुलाया हो रही है।

मैंने वर्चुअलट्रैक निर्देश के बिना भी कोशिश की लेकिन कुछ भी काम नहीं किया।

क्या कोई मेरी मदद कर सकता है?

Answer 1

आपको 'उत्पादों का उपयोग करने की आवश्यकता है | async 'पाइप अगर' उत्पादों 'को सर्वर से सामग्री प्राप्त हो रही है जैसे firebaselistobservable। एक सामान्य सरणी वर्चुअलट्रैकबी के साथ कभी नहीं कहा जाता है।