Ionic 4 分页

Question

我有一个简单的提供者，它从API网址获取数据，我需要帮助对这些数据进行分页，并通过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个帖子无关。

这段代码目前运行良好，我需要做一些分页和添加滚动加载。

视图

此代码返回每个类别的帖子，我需要对其进行分页（帖子）。

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

你有什么想法，应该更改哪个部分以及如何更改吗？

- mafortis

---

已解决：我在这里解决了我的问题 https://forum.ionicframework.com/t/paginate-api-data/165163 - mafortis

Answer 1

还有另一种方法可以使用您的代码。

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

 setPage(page: number) {
        if (page < 1 || page > this.pager.totalPages) {
            return;
        }

        // get pager object from service
        this.pager = this.pagerService.getPager(this.allItems.length, page);

        // get current page of items
        this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
    }

- Sarath Mohandas

Answer 2

将您的getData()函数参数化，以接受pageNumber和/或skip参数，并在ion-infinite-scroll的(ionInfinite)输出事件中调用它。使用分页参数修改url变量以获取所需数据。

此外，当总数据等于获取的数据时，请禁用infiniteScroll。

- Abhishek Sharma

Answer 3

Ionic 4 无限滚动

https://ionicframework.com/docs/api/infinite-scroll

在 home.page.html 文件中

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button (click)="toggleInfiniteScroll()" expand="block">
    Toggle Infinite Scroll
  </ion-button>

  <ion-list>
    <ion-item *ngFor="let item of dataList">
      <ion-label>{{item}}</ion-label>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

home.page.ts

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;


  dataList:any;

  constructor() {
    this.dataList = [];

    for (let i = 0; i < 25; i++) { 
      this.dataList.push("Item number "+this.dataList.length);
    }
  }



  loadData(event) {

    setTimeout(() => {
      console.log('Done');
      for (let i = 0; i < 25; i++) { 
        this.dataList.push("Item number "+this.dataList.length);
      }
      event.target.complete();

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (this.dataList.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }
}

- Siddhartha Mukherjee