ngx-pagination 在单击 I next 时不呈现下一个项目，第一页工作正常

问：

我有以下问题：

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

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

代码如下：

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

这是它在我的本地主机上的实际外观的图像，以及当我单击 NEXT 或转到第 2 页时会发生什么，如您所见，响应确实为我带来了接下来的 10 个项目（图像中没有显示，但我可以确认它们是 10 个不同的项目）

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

但是，正如您所看到的，即使我的网络确实正确地将有效负载与第 2 页一起引入，它也没有显示在我的屏幕上，表是空的，但项目已被检索。

我在这里做错了什么？

Angular 分页服务器端 angular11 ngx-pagination

对于其他在这里寻找解决方案并查看我的“response.length”是如何设置的人，请知道这是错误的。我需要一个实际的 NUMBER，其中包含总共存在多少个项目，以便 ngx-pagination 知道它需要设置多少页。除了 Souhail 的 answeer 之外，其他一切都很好，这也是我必须修复和理解的事情。

答：

1赞 Souhail Chougrani 12/14/2022 #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();
  }

ngx-pagination 在单击 I next 时不呈现下一个项目，第一页工作正常 - Angular 11

ngx-pagination does not render next items when click I next, first page works fine - Angular 11

评论

评论