Angular Material分页器下一页禁用 服务端分页总条数配置问题

错误现象 #

通过GraphQL接口获取到全量共7条业务记录，配置mat-paginator实现服务端分页，设定每页展示2条数据，第0页加载前2条记录时，组件预期展示“1-2 共7条”，实际运行出现两个异常：

• 分页组件显示为“1-2 共2条”
• 下一页切换箭头处于禁用状态，无法向后端发起请求获取后续页数据

异常根因 #

mat-paginator的分页计算完全依赖length属性传入的全量总记录数，而非当前接口返回的当前页数据条数。出现上述问题的核心原因是开发时错误将当前页获取到的2条数据的长度，赋值给了分页组件的length参数：

• 组件按传入的length=2计算总页数为Math.ceil(2/2)=1，因此判定没有后续页，自动禁用下一页按钮
• 组件读取length值计算总展示条数，自然显示为总2条

正确配置方法 #

• 从GraphQL接口响应中单独提取全量业务的总记录统计值（即全量7条的统计数，注意该值是接口和分页列表一起返回的聚合字段，和当前页返回的列表数组长度无关）
• 将提取到的总记录数，赋值给mat-paginator实例的length属性
  模板定义示例：

  <mat-paginator 
    [pageSize]="2" 
    [pageSizeOptions]="[2]" 
    showFirstLastButtons>
  </mat-paginator>
  

  组件逻辑中赋值示例：

  // 接口返回结构示例：{ list: 2条当前页数据, totalCount: 7全量总数 }
  this.paginator.length = res.totalCount;
  

• 赋值完成后，组件会自动按总记录数7、每页2条计算总页数为4，下一页按钮自动启用；点击翻页时组件会触发page事件，在事件回调中将当前的pageIndex、pageSize作为查询参数传给GraphQL接口，即可正常获取后续页数据。

配置注意事项 #

• 禁止将当前页返回的列表数组长度赋值给length：哪怕是最后一页返回的不足每页条数的数据，length参数始终要传全量的总记录数
• 注意赋值时机：要等GraphQL接口完成响应、拿到总统计值后再给length赋值，不要在组件初始化阶段写死总长度
• 列表查询条件变更时，要同步更新length值，避免分页组件残留旧的总记录数，导致页码计算错误

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