Ion-infinite-scroll 新推送的图像不加载

Question

我有一个网格视图来显示图像，我正在尝试使用 ion-infinite scroll 在用户滚动到底部时加载更多图像。我触发了一个名为“loadMorePosts”的事件，它使 API 调用获取下一组图像并将其附加到视图中使用的数组。我的问题是附加图像没有加载，似乎 ion-img 元素的“src”没有设置。

下面是我的HTML代码

<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>

下面是离子无限卷轴的方法

   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);
      }

这是将新图像推送到阵列时的显示方式

我似乎无法弄清楚是什么原因导致新图像无法加载。任何帮助，将不胜感激。谢谢你的时间。

Answer 1

完整演示你可以在这个演示中找到Stackblitz Link

您必须将 rxjs 主题与 rxjs 运算符函数一起使用 concatemap 与扫描运算符。基本上，最初你调用第一页 api 图像，然后当用户到达结束位置时，无限滚动调用函数从服务器加载另一个 api 图像数据，那时你只需要将信息传递给流的主题和初始管道被调用到来自服务器的下一个图像块 api 数据。

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();
  }

这样你只需要使用如下所示的异步管道从 html 订阅 observable...

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

其余的将按照您的要求工作。谢谢。

Ion-infinite-scroll 新推送的图像不加载

Ion-infinite-scroll new pushed images does not load

ionic-framework

ion-infinite-scroll

angular

ionic5