gpt4 book ai didi

angular - ionic 4分页

转载 作者:行者123 更新时间:2023-12-04 04:29:47 25 4
gpt4 key购买 nike

我有一个简单的提供者,它从 API 获取数据网址,我需要帮助 paginate此数据并通过 IonInfiniteScroll 加载.

提供者

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { LoadingController } from '@ionic/angular';

@Injectable({
providedIn: 'root'
})
export class CategoriesService {

apiUrl = 'https://example.com/api/categories';

constructor(private http: HttpClient, private loadingCtrl: LoadingController) { }

getDetails(url) {
const httpOptions = {
headers: new HttpHeaders({
'Accept': 'application/json, text/plain',
'Content-Type': 'application/json'
})
};

return this.http.get(`${this.apiUrl}/${url}`, httpOptions).pipe(
map(category => category)
);
}
}

模块

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { CategoriesService } from './../../services/categories.service';
import { LoadingController } from '@ionic/angular';

@Component({
selector: 'app-categories-details',
templateUrl: './categories-details.page.html',
styleUrls: ['./categories-details.page.scss'],
})
export class CategoriesDetailsPage implements OnInit {

categories: Observable<any>;
loading: any;

constructor(
private categoriesService: CategoriesService,
public loadingController: LoadingController,
) {}

ngOnInit() {
this.getData();
}

async getData(){
this.loading = await this.loadingController.create({
message: 'Please wait...',
spinner: 'crescent',
duration: 2000
});

await this.loading.present();

this.categoriesService.getCategories().subscribe((res) => {
this.categories = res;
this.hideLoading()
});
}

private hideLoading() {
this.loading.dismiss();
}

}

备注 loading: any;当前加载仅显示加载直到页面加载,它一次返回所有帖子,它与帖子分页无关或仅加载前 10 个。

This code currently working just fine, all I need to make sort of pagination and add scroll loading.



查看

此代码返回我需要分页的每个类别帖子(帖子)

<ion-content padding>
<ion-grid>
<ion-row>
<ion-list *ngIf="category">
<ion-item *ngFor="let post of category.posts">
<ion-avatar slot="start">
<img [routerLink]="['/', 'posts', post.url]" [src]="post.image">
</ion-avatar>
<ion-label class="ion-text-wrap" [routerLink]="['/', 'posts', post.url]">{{post.title}}</ion-label>
</ion-item>
</ion-list>
</ion-row>
</ion-grid>
</ion-content>

知道我应该更改哪个部分以及如何更改吗?

最佳答案

参数化您的 getData() 函数以接收 pageNumber 和/或跳过参数,并在 ion-infinite-scroll 的 (ionInfinite) 输出事件中调用它。修改url带有分页参数的变量以获取所需的数据。

此外,当总数据等于获取的数据时,禁用无限滚动。

关于angular - ionic 4分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56318774/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com