Angular服务端分页mat-paginator初始页码显示异常求助

问题出在Angular Material分页器的0-based索引和后端1-based页码的不匹配上，具体细节和修复步骤如下：

核心矛盾 #

• Angular的mat-paginator使用0-based索引：pageIndex=0对应第1页，pageIndex=1对应第2页，以此类推。
• 你的后端分页逻辑使用1-based页码：page=1对应第1页，page=2对应第2页。

之前的代码在初始值和事件处理上没有统一两者的转换逻辑，导致显示和实际请求的页码错位：

1. 初始page=1绑定到mat-paginator的pageIndex，直接让分页器显示第2页，但实际请求的是后端第1页数据，出现显示与数据不匹配。
2. 加+1后，切换分页时pageEvent.pageIndex=0（第1页）转成page=1传给后端，逻辑正确；但初始page=1转成page=2传给后端，导致加载第2页数据。

修复步骤 #

1. 修正组件的初始页码变量 #

将组件内的page初始值改为0（对应分页器的第1页）：

export class EquipmentsListComponent {
    // ...其他变量
    page = 0; // 改为0-based索引，对应分页器第1页
    pageSize = 3;
    // ...
}

2. 调整初始加载的页码转换 #

在ngOnInit中，将0-based的page转换为1-based传给后端：

ngOnInit(): void {
    this.store.dispatch(
        EquipmentPageActions.loadEquipments({
            page: this.page + 1, // 0+1=1，传给后端正确的第1页
            limit: this.pageSize
        })
    );
    // ...其他初始化逻辑
}

3. 统一分页切换的转换逻辑 #

handlePageChange中直接存储分页器的0-based索引，传给后端时再转成1-based：

handlePageChange(pageEvent: PageEvent): void {
    this.page = pageEvent.pageIndex; // 直接保存分页器的0-based索引
    this.pageSize = pageEvent.pageSize;
    this.store.dispatch(
        EquipmentPageActions.loadEquipments({
            page: this.page + 1, // 转成1-based页码给后端
            limit: this.pageSize
        })
    );
}

4. 保持模板绑定不变 #

模板中mat-paginator的pageIndex绑定page变量即可，此时page是0-based，与分页器的逻辑一致：

<mat-paginator
    [length]="count$ | async"
    [pageSize]="pageSize"
    [pageSizeOptions]="[3, 6, 9]"
    [showFirstLastButtons]="true"
    [pageIndex]="page"
    (page)="handlePageChange($event)"
>
</mat-paginator>

验证效果 #

• 初始加载时：page=0，分页器显示第1页，传给后端page=1，加载正确的第1页数据。
• 切换分页时：比如点击第2页，pageEvent.pageIndex=1，传给后端page=2，加载第2页数据，分页器显示第2页，完全匹配。

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