Ion-infinite-scroll new pushed images does not load

Issue

I got a grid view to display images, I am trying to use the ion-infinite scroll to load more images when the user scrolls to the bottom. I fire an event called "loadMorePosts" which makes an API call gets the next set of images and append it to an array used in the view. My problem is the appended images do not load, seems like the "src" of the ion-img element doesn’t get set.

Below is my HTML code

<ion-content>
  <!-- <ion-searchbar showCancelButton="focus" (ionInput)="searchNeighbourHoodWithSearchTerms($event)"></ion-searchbar> -->
  <ion-searchbar #searchBar animated="true" (ionInput)="searchNeighbourHoodWithSearchTerms($event)"></ion-searchbar>
  <ion-slides pager="false" [options]="slideOpts">
    <ion-slide *ngFor="let category of userPreferredBlogCategories;">
      <ion-button id= {{category.categoryName}} class="categoryTabs ion-focused" (click)="searchNeighbourHoodWithCategory(category.categoryName)">{{category.categoryName}}</ion-button>
      </ion-slide>
  </ion-slides>
  <ion-grid>
    <ion-row>
        <ion-col size="auto" *ngFor="let img of neighbourhoodPosts index as i;">
          <ion-img class="neighbourhood-img" [src]="img.blobUrl" (click)="viewdetails(i)"></ion-img>
          <!-- <ion-label style="color: red; margin-top: 20%;">{{img.caption}}</ion-label> -->
        </ion-col>    
    </ion-row>
  </ion-grid>
   <ion-infinite-scroll threshold="100px" (ionInfinite)="loadMorePosts($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

Below is the method called the ion-infinite-scroll

   async loadMorePosts(evt) {
        setTimeout(() => {
          if (this.currentSearchTerms != null) {
            this.apiHandler.GetNeighbourhoodFeed(this.currentSearchTerms, false, true, "").subscribe((response) => {
              this.neighbourhoodPosts.push(response);
              evt.target.complete();
            });
          }    
        }, 1000);
      }

This is how it appears when new images are pushed to the array

enter image description here

I cannot seem to figure out what causes the new images not to load.
Any help would be appreciated.
Thank you for your time.

Solution

Compelete Demo You can find out in this demo Stackblitz Link

You have to use rxjs subject with rxjs operator function concatemap with scan operator. Basically, initially you call first page api image, and then when user reaches to end position then infinite scroll calls function to load another api image data from server, at that time you simple need to pass info to subject and initial pipe of stream gets called to next chunk of image api data from server.

neighbourhoodPosts = this.page$.pipe(
  concatMap(({ page, limit }) => this.loadImageData(page, limit)),
  scan((acc: any[], items: any[]) => [...acc, ...items])
);

  loadImageData(page, limit) {
    return this.http
     .get(`https://picsum.photos/v2/list?page=${page}&limit=${limit}`)
     .pipe(tap((data) => console.log(data)));
  }

  loadMorePosts(event) {
     this.page += 1;
     this.page$.next({ page: this.page, limit: this.limit });
     event.target.complete();
  }

and this way you only need to subscribe observable from html using async pipe like below…

   <ion-col
      size="auto"
      *ngFor="let img of neighbourhoodPosts | async; index as i"
   >

and rest will works as what your requirement is. Thank You.

Answered By – GaurangDhorda

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published