单击下一步时 ngx-pagination 不呈现下一个项目，第一页工作正常 - Angular 11（已解决）

Question

我有以下问题：

昨天我开始学习本教程以学习如何使用 ngx-pagination，因为我需要服务器端分页。

问题是我想要的前 10 个项目将被正确呈现，但是如果我单击下一步（这将使我的参数： ?skip=0&take=10 go 到?skip=1&take=10 ）它将带我到下一个页面，但是接下来的 10 个项目不会显示，但我可以确认它们是通过GET正确调用的，最后的图像将显示它的外观。

代码如下：

// department.service.ts
...
    getAll(params: any) : Observable<Department[]> {
        return this.httpClient.get<Department[]>(this.url, { params })
        .pipe(
          retry(2),
          catchError(this.handleError)
       )
     }
...

// department.component.ts
...
departments: [];
page = 1;
count = 0;
totalItems = 10;
...
ngOnInit() {
    this.retrieveAllDepartments()
  }

  getRequestParams(page: number, totalItems: number): any {
    // tslint:disable-next-line:prefer-const
    let params: any = {};

      params[`skip`] = page - 1;

      params[`take`] = totalItems;

    return params;
  }

  retrieveAllDepartments(): void {
    const params = this.getRequestParams(this.page, this.totalItems);

    this.departmentService.getAll(params)
    .subscribe(
      response => {
        this.departments = response;
        this.count = response.length;
      });
  }

  handlePageChange(event: number): void {
    this.page = event;
    this.retrieveAllDepartments();
  }

// department.component.html
...
   <tr *ngFor="let department of departments | paginate: { 
       itemsPerPage: itemsPerPage,
       currentPage: page,
       totalItems: totalItems }">
       <td>{{department.name}}</td>
   </tr>
...
 <pagination-controls
 [responsive]="true"
 (pageChange)="handlePageChange($event)"
 ></pagination-controls>

这是它在我的本地主机上的实际外观的图像，以及当我单击下一步或 go 到第 2 页时发生的情况，如您所见，响应确实给我带来了接下来的 10 个项目（未显示在图像中，但我可以确认它们是 10 个，不同的项目）

如您所见，上图是第 1 页skip=0 ，下图是第 2 页skip=1

但是，如您所见，即使 my.network 确实正确地将 payload 带入了第 2 页，它也没有显示在我的屏幕上，表格是空的，但检索到了项目。

我在这里做错了什么？

Answer 1

你混淆了totalItems和itemsPerPage

departments: [];
page = 1;
count = 0;
totalItems:number; ====> this should be **itemsPerPage**
itemsPerPage = 10
...
ngOnInit() {
    this.retrieveAllDepartments()
  }

  getRequestParams(page: number, itemsPerPage : number): any {
    // tslint:disable-next-line:prefer-const
    let params: any = {};

      params[`skip`] = page - 1;

      params[`take`] = itemsPerPage ;

    return params;
  }

  retrieveAllDepartments(): void {
    const params = this.getRequestParams(this.page, this.itemsPerPage);

    this.departmentService.getAll(params)
    .subscribe(
      response => {
        this.departments = response;
        this.count = response.length;
      });
  }

  handlePageChange(event: number): void {
    this.page = event;
    this.retrieveAllDepartments();
  }