Ionic 4 分页

Question

我有简单的提供程序，它从

API

url 获取数据，我需要帮助来

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

此代码目前工作得很好，我只需要进行分页并添加滚动加载即可。

查看

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

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

知道我应该更改哪一部分以及如何更改吗？

Answer 1

参数化您的 getData() 函数以接受 pageNumber 和/或跳过参数，并在 ion-infinite-scroll 的 (ionInfinite) 输出事件中调用它。使用分页参数修改

url

变量以获取所需的数据。

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

Answer 2

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

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

Answer 3

离子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;
  }
}