我有一個網格視圖來顯示影像，當用戶滾動到底部時，我嘗試使用離子無限滾動來加載更多影像。我觸發了一個名為“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}} (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 [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>
下面是稱為 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);
}
這是將新影像推送到陣列時的顯示方式
我似乎無法弄清楚是什么導致新影像無法加載。任何幫助，將不勝感激。感謝您的時間。
uj5u.com熱心網友回復：
Compelete Demo 您可以在此演示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"
>
休息將按照您的要求作業。謝謝你。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358044.html
下一篇：在組件Ionic中重新加載資料