Replacing items of an ion-infinite-scroll does not trigger ionInfinite anymore

Ionic Framework
1

I’m struggling with a ion-infinite-scroll in combination with an ion-searchbar used in a custom module/component:

When the component gets initialized it fetches a chunk of data from a service, and puts them as ion-items inside a div by a *ngFor directive. When scrolling down everything works fine and each time it reaches the bottom, the ionInfinite event is triggered and the next chunk is fetched and attached to the list until all entries are there.

Now the ion-searchbar should get used to filter these entries so data gets truncated and the infinite-scroll should act as before: get the first chunk, scroll down, fetch the next one. But in fact this does not work. I believe this is because the infinite scroll still has the offset it scrolled to the first time.

I was looking for a method to reset the scroll but without luck. Anybody got an idea on how to “re-use” a infinite scroll?

<ion-searchbar #searchbar (ionChange)="searchTermChanged($event)"></ion-searchbar>

<ion-content style="height: 150px; z-index: 10000">
  <div *ngFor="let result of results">
    <ion-item>
      <ion-label>{{result}}</ion-label>
    </ion-item>
  </div>

  <ion-infinite-scroll #scroll threshold="10px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
                                 loadingSpinner="bubbles"
                                 loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

searchTermChanged(event) {
    console.log('searchTermChanged', event);
    this.content.scrollToTop();
    this.dataProvider.searchTerm = event.detail.value;
    this.infiniteScroll.disabled = false;
    this.results = this.dataProvider.filterResults(0, this.chunkSize);
    this.virtualScroll.ngDoCheck();

    console.log(this.results);
  }

loadData(event) {
      const nextResults = this.dataProvider.filterResults(this.results.length, this.chunkSize);
      nextResults.forEach(result => {
        this.results.push(result);
      });
      event.target.complete();

      if (this.results.length === this.dataProvider.countResults()) {
        console.log('got all results');
        event.target.disabled = true;
      }
  }