ngx-pagination 服务器端分页（逐页显示 api 中的数据）

Question

调用 api 时数据立即加载，我想逐页呈现数据。下面是我使用的代码

我在我的项目中安装了 ngx-pagination 下面是我的代码。

component.html

<div class="col-md-4 pb-5" *ngFor="
    let data of fdata| paginate : {
            itemsPerPage: pageSize,
            currentPage: page,
            totalItems: count
          };
    let i = index
  " [class.active]="i == currentIndex" (click)="setActiveTutorial(tutorial, i)">
<div>{{data.name}}</div>
</div>

Component.ts

import { Component, OnInit } from '@angular/core';
import { HttpclientService } from '../../../application/httpclient/httpclient.service';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';

const STATE_KEY_ITEMS = makeStateKey('items');

@Component({
  selector: 'app-featured-news',
  templateUrl: './featured-news.component.html',
  styleUrls: ['./featured-news.component.scss']
})
export class FeaturedNewsComponent implements OnInit {

  items: any = [];

  tutorials: any;
  currentTutorial = null;
  currentIndex = -1;
  title = '';

  page = 1;
  count = 0;
  pageSize = 9;
  // pageSizes = [3, 6, 9];

  featureNewsDatas: any= [];
  featureLoaded: boolean;

  constructor(private state: TransferState,private httpclientService: HttpclientService,@Inject(PLATFORM_ID) private platformId: Object,
  @Inject(APP_ID) private appId: string) { }

  ngOnInit(): void {
    this.featuredNews();
  }
  getRequestParams(searchTitle, page, pageSize): any {
    // tslint:disable-next-line:prefer-const
    let params = {};

    if (searchTitle) {
      params[`title`] = searchTitle;
    }

    if (page) {
      params[`page`] = page - 1;
    }

    if (pageSize) {
      params[`size`] = pageSize;
    }

    return params;
  }

  featuredNews(): void {
    this.items = this.state.get(STATE_KEY_ITEMS, <any> []);
    if(this.featureNewsDatas.length == 0){
    this.featureLoaded = false;
    const params = this.getRequestParams(this.title, this.page, this.pageSize);
    this.httpclientService.getHttpclient('API link')
      .subscribe(
        items => {
          const platform = isPlatformBrowser(this.platformId) ?
            'in the browser' : 'on the server';
          console.log(`getUsers : Running ${platform} with appId=${this.appId}`);
          this.featureNewsDatas = items;
          this.count=this.featureNewsDatas.length;
          this.featureLoaded = true;
          console.log("news featureNewsDatas",this.featureNewsDatas)
          this.state.set(STATE_KEY_ITEMS, <any> items);
        });       
      } else {
        this.featureLoaded = true;
      }
  }
  resetUsers(): void {
    this.featureNewsDatas = null;
    this.featureLoaded = true;
  }

  handlePageChange(event): void {
    this.page = event;
    this.featuredNews();
    this.onActivate();
  }

  onActivate() {
    let scrollToTop = window.setInterval(() => {
        let pos = window.pageYOffset;
        if (pos > 0) {
            window.scrollTo(0, pos - 40); // how far to scroll on each step
        } else {
            window.clearInterval(scrollToTop);
        }
    }, 16);
}

}

service.ts

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

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

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

  constructor(private http: HttpClient) { }

  getHttpclient(url: string): Observable<object> {
    return this.http.get(url, httpOptions);
  }


}

当前代码在服务器端呈现方面工作得很好，但所有数据都是立即加载的，我需要一页一页地加载数据。如何从 API

逐页获取数据

Answer 1

我们可以使用我们应该从 API 获得的总计数逐页呈现数据，而且来自 API 本身的数据应该按部分排序，例如：如果我想显示 9 data 那么当我们点击 API.

时应该只有 9 个数据

同样，当我们调用 API 时，我们应该发送页码，我们可以通过该页码获取特定页面的数据。

ngx-pagination 服务器端分页（逐页显示 api 中的数据）

ngx-pagination server side paging (rendring data from api page by page)

pagination

server-side-rendering

angular