[v4]: Virtual scroll + infinite scroll not working

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.0

System:

   NodeJS : v10.6.0 (/usr/local/bin/node)
   npm    : 6.1.0
   OS     : macOS High Sierra

Describe the Bug

Trying to have an infinite scroll along with virtual scroll. After loading additional data, the virtual scrol is unable to scroll further and it stops with the initially loaded data. new data is not getting appended. Tried the same code without virtual scroll, it worked as expected.

Steps to Reproduce

Related Code

<ion-content padding>

  <ion-virtual-scroll [items]="data" approxItemHeight="320px">
    <ion-card *virtualItem="let item; let itemBounds = bounds;">
      <ion-card-header>
        <ion-card-title>{{ item }}</ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-virtual-scroll> 

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

Angular code

import { Component,ViewChild } from '@angular/core';
import {InfiniteScroll} from '@ionic/angular'

export class HomePage {
  @ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;
   data = [];

  doInfinite(event) {
    console.log("loadData came");
    setTimeout(function() {
      let start = this.data.length;
      let end = this.data.length + 10 ;
      console.log("start: ",start,"end: ",end);
      for(let i=start;i<end;i++){
        this.data.push(i+1);
      }      
      console.log('Done');
      event.target.complete();
    }.bind(this), 2000);
  }
}

Expected Behavior expected scrolling with new appended items.

Additional Context List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[felly]

I’ve slightly modified above code and its working fine for me:

• preloading data within the constructor
• calling checkEnd() on IonVirtualScroll element after new data has been pushed

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll, IonVirtualScroll } from '@ionic/angular';

@Component({
  selector: 'app-home',
  template: `
    <ion-content padding>
      <ion-virtual-scroll [items]="data" approxItemHeight="320px">
        <ion-card *virtualItem="let item; let itemBounds = bounds;">
          <ion-card-header>
            <ion-card-title>{{ item }}</ion-card-title>
          </ion-card-header>
        </ion-card>
      </ion-virtual-scroll>

      <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>
  `
})
export class HomePage {

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  @ViewChild(IonVirtualScroll) virtualScroll: IonVirtualScroll;
  data = [];

  constructor( ) {
    // prefill list with data
    this.doInfinite();
  }

  doInfinite(event) {
    console.log('loadData came');
    setTimeout(() => {
      const start = this.data.length;
      const end = this.data.length + 20;
      console.log('start: ', start, 'end: ', end);
      for (let i = start; i < end; i++) {
        this.data.push(i + 1);
      }
      console.log('Done', this.data);
      this.virtualScroll.checkEnd();
      this.infiniteScroll.complete();
    }, 2000);
  }
}

[Pautomagi]

From what I can tell this is still an issue.

I fetch the initial data and everything loads properly, once scrolled to the bottom I see the infinite scroll loader appearing and another request fires off to the api and gets more items. They are pushed to my items array but the virtualscroll does not update.