title: ionic 3.X: virtual scroll with infinite scroll(i.e changing data set)
body: <p>I'm using "ionic-angular": "3.2.1" version but Virtual list shows following blank screen after some scrolls.</p>
  
  <p><a href="https://i.stack.imgur.com/FAWum.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FAWum.png" alt="enter image description here"></a></p>
  
  <p>I tried by following code.</p>
  
  <pre><code>&lt;ion-content padding&gt;
      &lt;ion-list [virtualScroll]="products" approxItemHeight="100px" [virtualTrackBy]="trackProduct"&gt;
          &lt;ion-item category-item *virtualItem="let product" (click)="viewProduct(product)"&gt;
              &lt;img product-image src="some_url.png" /&gt;
              &lt;div prduct-description ellipsize&gt;
              &lt;div product-name ellipsize&gt;{{product.productName || "" | uppercase}}&lt;/div&gt;
                  &lt;div product-sku ellipsize&gt;SKU# : {{product.sku}}&lt;/div&gt;
                  &lt;div price&gt;${{product.price}}/Case&lt;/div&gt;
              &lt;/div&gt;
          &lt;/ion-item&gt;
      &lt;/ion-list&gt;
      &lt;ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px" #infiniteScroll&gt;
          &lt;ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."&gt;
          &lt;/ion-infinite-scroll-content&gt;
      &lt;/ion-infinite-scroll&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>here is relevant ts file code:</p>
  
  <pre><code> /**
    *  This method will be used for virtual scroll.
    * @param index 
    * @param product 
    */
    trackProduct(index, product: Product) {
      console.log(index, product);
      return product.productId;
    }
  </code></pre>
  
  <ul>
  <li>trackProduct is not getting called.</li>
  </ul>
  
  <p>I also tried without virtualTrackBy directive but nothing work.</p>
  
  <p>Could anyone help me?</p>