Angular分页异常：点击下一页后上一页按钮禁用

问题现象 #

数据库共2条数据，分页大小设为1，初始页面正常显示1/2；点击下一页按钮加载第二条数据后，页码错误显示为1/1，且上一页按钮被禁用，无法返回第一页。

问题根源分析 #

1. 手动绑定pageIndex导致状态冲突：HTML中给mat-paginator手动绑定了[pageIndex]="currentPage"，但同时又将dataSource.paginator与分页器关联。MatTableDataSource会自动管理分页器的页码状态，手动绑定会覆盖其内部状态，导致分页器显示异常。
2. loadPage方法逻辑冗余：额外的页码判断完全没必要，直接使用PageEvent传递的参数即可。
3. API返回值验证：需确保接口返回的totalElements是数据库总记录数（此处应为2），而非当前页的记录数，否则length会被错误更新，导致分页器计算总页数错误。

修复步骤 #

1. 移除HTML中的手动页码绑定

修改mat-paginator标签，删除[pageIndex]="currentPage"属性：

<mat-paginator #paginator
   (page)="loadPage($event)"
   [length]="length"
   [pageSize]="pageSize"
   [disabled]="disabled" 
   [showFirstLastButtons]="showFirstLastButtons"
   [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
   [hidePageSize]="hidePageSize"
   aria-label="Select page">
</mat-paginator>

2. 简化loadPage方法逻辑

直接使用事件参数更新分页参数，无需额外判断：

loadPage(event: PageEvent): void {
  this.currentPage = event.pageIndex;
  this.pageSize = event.pageSize;
  this.getAllPatients();
}

3. 调整初始化顺序（可选但推荐）

在ngAfterViewInit中先关联分页器，再加载数据，确保状态同步：

ngAfterViewInit(): void {
  this.dataSource.paginator = this.paginator;
  this.getAllPatients();
}

4. 验证API返回值

确认getAllPatients接口返回的响应中，totalElements字段始终为总记录数（此处应为2），而非当前页的记录数。如果接口返回错误，需先修复API逻辑。

修复原理 #

移除手动页码绑定后，MatTableDataSource会自动根据length和pageSize计算总页数，并同步分页器的页码状态；简化后的loadPage方法确保分页参数准确传递给API，获取对应页的数据；正确的totalElements值保证分页器能正确计算总页数，避免出现页码显示错误和按钮禁用异常。

内容的提问来源于stack exchange，提问作者Preet Pal Bhatia