Infinite-scroll broken when resetting the item list

I have an ionic angular application which uses an infinite scroll. When resetting the initial data to fetch updates, or to the fetch a change in language and to retrieve data in another language, the infinite scroll is broken.

ngOnInit() {
this.languageSubscription = this.userService.getLanguage().subscribe(lang => {
this.language = lang;
this.resetElements();
});
}

// Breaks the infinite scroll
resetElements() {
this.page = 1;
this.elements = [];
this.fetchElements();
}

fetchElements(event?: any) {
this.elementsSubscription = this.elementService.getElements(this.language, this.page, this.limit)
.subscribe(res => {
this.elements = [...this.elements, ...res.body.data];
this.totalPages = res.body.totalPages;
this.page++;
if (event) event.target.complete();
});
}

loadMore(event: any) {
if (this.page <= this.totalPages) {
this.fetchElements(event);
}
else {
event.target.disabled = true;
}
}

handleRefresh(event: any) {
this.resetElements();
event.target.complete();
}


Infinite scroll html:

<ion-infinite-scroll #infiniteScroll (ionInfinite)="loadMore($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles">
</ion-infinite-scroll-content>
</ion-infinite-scroll>


I tried to re-enable the infinite scroll with a Viewchild, but that didn't work.

@ViewChild('infiniteScroll') infiniteScroll: IonInfiniteScroll;

resetElements() {
this.page = 1;
this.elements = [];

if (this.infiniteScroll) {
this.infiniteScroll.disabled = false;
}

this.fetchElements();
}

Continue reading...