1

我有一个网格视图来显示图像，当用户滚动到底部时，我正在尝试使用离子无限滚动来加载更多图像。我触发了一个名为“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);
      }

这是将新图像推送到数组时的显示方式

在此处输入图像描述

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

4

1 回答 1

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

休息将按照您的要求进行。谢谢你。

于 2021-11-16T09:51:05.660 回答