title: ionic infinite scroll is not working after scrolling one time
body: <p>I am using ionic 4 with angular
  I am trying to use infinite scroll
  my .html page is:</p>
  <pre><code>&lt;ion-content&gt;
  
    &lt;ion-grid&gt;
      &lt;ion-row&gt;
        &lt;ion-col style=&quot;flex:1;&quot;&gt;
          ID
        &lt;/ion-col&gt;
        &lt;ion-col style=&quot;flex:2;&quot;&gt;
          Date
        &lt;/ion-col&gt;
        &lt;ion-col style=&quot;flex:1;&quot;&gt;
          Amount
        &lt;/ion-col&gt;
        &lt;ion-col style=&quot;flex:1;&quot;&gt;
          Type
        &lt;/ion-col&gt;
        &lt;ion-col style=&quot;flex:1;&quot;&gt;
          Status
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
      &lt;ion-row *ngFor=&quot;let item of dataList&quot;&gt;
        &lt;ion-col style=&quot;flex:1;&quot;&gt;
          {{item.id}}
        &lt;/ion-col&gt;
        &lt;ion-col style=&quot;flex:2;&quot;&gt;
          {{item.created}}
        &lt;/ion-col&gt;
        &lt;ion-col style=&quot;flex:1;&quot;&gt;
          {{item.total}}
        &lt;/ion-col&gt;
        &lt;ion-col style=&quot;flex:1;&quot;&gt;
          &lt;b *ngIf=&quot;item.type==1&quot;&gt;Delivery&lt;/b&gt;
          &lt;b *ngIf=&quot;item.type==2&quot;&gt;Pickup&lt;/b&gt;
          &lt;b *ngIf=&quot;item.type==3&quot;&gt;Reservation&lt;/b&gt;
          &lt;b *ngIf=&quot;item.type==4&quot;&gt;R with Food&lt;/b&gt;
          &lt;b *ngIf=&quot;item.type==5&quot;&gt;QR&lt;/b&gt;
          &lt;b *ngIf=&quot;item.type==6&quot;&gt;Catering&lt;/b&gt;
        &lt;/ion-col&gt;
        &lt;ion-col style=&quot;flex:1;&quot;&gt;
          {{item.status}}
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
    &lt;/ion-grid&gt;
    
    &lt;ion-infinite-scroll threshold=&quot;100px&quot; (ionInfinite)=&quot;loadData($event)&quot;&gt;
  &lt;ion-infinite-scroll-content
    loadingSpinner=&quot;bubbles&quot;
    loadingText=&quot;Loading more data...&quot;&gt;
  &lt;/ion-infinite-scroll-content&gt;
    &lt;/ion-infinite-scroll&gt;
  &lt;/ion-content&gt;
  </code></pre>
  <p>and .ts page is:</p>
  <pre><code>loadData( event ) {
  console.log('loadData called');
  setTimeout(() =&gt; {
    console.log('Done');
    
    //loading some data from server
  
    event.target.complete();
    if (this.dataList.length &gt; 100) {
      event.target.disabled = true;
    }
  }, 500);
  </code></pre>
  <p>}</p>
  <p>in constructor i am loading some data also at the beginning</p>
  <p>now when i run it scroll works one time. it loads some data in first scroll.
  after that scroll even does not fire.</p>
  <p>what can be the problem.
  can anyone please help?</p>