已解决

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

已解决

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

Answer 3

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

 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 4

离子4无限滚动

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

在home.page.html文件中

multi-field

home.page.ts

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

离子4分页

4 个答案:

已解决