After scrolling to load more data, updating the list parameters blanks out the list

Ionic Framework ionic-v3
1

I’m working on an app that fetches a list of items based on their category. I also put in infinite scroll to load sets of data at a time. Separately the two functionalities work; it fetches items by category based on the user’s selection or it will scroll and load more items within one category.

But when I try to do both togather it bombs. If I scroll in any category and load more data, then tap to fetch data from a new category then no more objects get fetched from the server and the list blanks out as if the item array is empty and doesn’t load any more data from the API. I’m a bit stuck and would really appreciate any insight. Not sure if I’m getting this problem because I currently don’t know much about ionic or observables yet.

list.html



<ion-segment-button *ngFor=“let itemCategory of itemCategories” value="{{ itemCategory.type_id }}" (click)=“selectCategory( itemCategory.type_id )”>


 <ion-list>
  <ion-card *ngFor="let item of items">
   <img class="thumb" src="http://project/images/{{item.image_link}}"/>
   <ion-card-content>
    <p>{{item.item_description}}</p>
   </ion-card-content>
 </ion-card>
</ion-list>


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

list.ts
ngOnInit() {

    this.itemService.getItemsByCategory( this.selectedCategory, this.pageSize, this.pageNo)
      .subscribe(
            data => {
                this.items = data;
                if(data.length < this.pageSize){
                      this.moreData = false;
                }
            },
            err => {
                console.log(err);
            },
            () => console.log('Item fetch completed')
        );
  }


selectCategory( category: number ) {
    this.selectedCategory = category;
    this.itemService.getItemsByCategory( this.selectedCategory, this.pageSize, this.pageNo)
      .subscribe(
            data => {
                this.items = data;
            },
            err => {
                console.log(err);
            },
            () => console.log('Item fetch completed')
        );
  }

loadMore() {
    this.itemService.getItemsByCategory( this.selectedCategory, this.pageSize, this.pageNo)
    .subscribe(
                data => {
                    for(let item of data) {
                      this.items.push(item);
                    }
                    if(data.length < 10){
                      this.moreData = false;
                    }
                    console.log('doInfinite, page number ' + this.pageNo);
                },
                err => {
                    console.log(err);
                },
                () => console.log('Item fetch completed')
     );

  }

  doInfinite(infiniteScroll) {

     this.pageNo++;
      this.loadMore();

       infiniteScroll.complete();


  }