Angular 11中ngx-pagination点击下一页无法渲染后续条目

你的核心问题出在ngx-pagination的参数配置错误，以及分页请求参数的计算逻辑问题，具体如下：

1. 最关键错误：分页管道的totalItems参数传错了 #

ngx-pagination中paginate管道的totalItems需要传入全量数据的总条数（比如总共有100条数据就传100），而不是每页展示的条数。你现在把totalItems设为10（每页条数），导致分页组件认为总数据只有10条，点击第2页时会判定无数据可展示，所以表格为空。

2. 分页请求参数skip计算错误 #

服务端分页的skip参数通常表示需要跳过的总数据条数，正确的计算方式应该是 (当前页-1)*每页条数，而不是你写的page-1。你现在第二页传skip=1，如果接口是按条数跳过的逻辑，这只会跳过1条数据，而非整页10条。

3. 组件变量定义不规范 #

• departments未明确类型并初始化，可能导致变更检测异常
• 未区分「每页条数」和「总数据条数」两个变量，混淆了配置逻辑

具体修复步骤 #

第一步：修正组件逻辑（department.component.ts） #

// department.component.ts
...
// 修正变量定义，明确区分各分页参数
departments: Department[] = []; // 明确类型并初始化
page = 1;
itemsPerPage = 10; // 每页展示条数
totalCount = 0; // 全量数据总条数，从接口获取
...
ngOnInit() {
    this.retrieveAllDepartments()
}

getRequestParams(page: number, itemsPerPage: number): any {
    let params: any = {};
    // 修正skip计算：跳过的总条数 = (当前页-1)*每页条数
    params[`skip`] = (page - 1) * itemsPerPage;
    params[`take`] = itemsPerPage;
    return params;
}

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

    this.departmentService.getAll(params)
    .subscribe(
      // 注意：需要后端接口返回包含总条数的结构，比如 { data: Department[], total: number }
      // 如果接口只返回数据数组，必须让后端修改接口返回总条数，否则分页控件无法正常显示总页数
      response => {
        this.departments = response.data; // 取当前页数据
        this.totalCount = response.total; // 取全量数据总条数
        this.count = response.data.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: totalCount }">
    <td>{{department.name}}</td>
</tr>
...
<pagination-controls
[responsive]="true"
(pageChange)="handlePageChange($event)"
></pagination-controls>

第三步：确认后端接口逻辑 #

如果你的后端skip参数是按页码而非条数设计的，可以保留params[skip] = page -1，但必须确保接口返回对应页码的正确数据。同时必须让后端返回全量数据的总条数，否则分页控件无法正确渲染总页数和分页按钮。

内容的提问来源于stack exchange，提问作者Amanda