Angular mat-paginator服务端分页修改页面大小无生效问题求助

你遇到的点击分页大小无响应、limit参数始终不变的问题，是前后端代码的逻辑错配叠加导致的，对照下面的点逐一修改即可：

核心bug1：分页回调函数存在逻辑错误 #

你写的onPaginate方法有两个硬伤，直接导致分页触发后无法正确发请求：

• 方法里引用了从未在类中定义的this.params变量，实际发请求时传的是undefined，接口根本收不到分页参数
• 方法里同步更新了page和size的值后，没有重新触发列表拉取流程，相当于改完状态啥也没干

修复后的回调代码：

onPaginate(pageEvent: PageEvent) {
  // 同步分页状态
  this.size = +pageEvent.pageSize;
  this.page = +pageEvent.pageIndex + 1;
  // 带着最新的分页参数重新拉取列表
  this.populateReferees();
}

核心bug2：前后端参数传递位置不匹配 #

前端服务里用GET请求调接口，分页参数是通过URL Query（也就是地址栏后面的?page=xx&size=xx这种形式）传递的，但后端接口代码是从req.body里解构page、size参数：

// 错误：GET请求的body不会被Express默认解析，这里拿到的全是undefined
const { page , size , fullName} = req.body

因为后端永远拿不到前端传的分页参数，所以limit一直走服务端默认值，不会随前端操作变化。

修复方式：把后端取值位置改成从请求Query中读取：

// 正确：GET请求的参数从query中取
const { page , size , fullName} = req.query

核心bug3：分页组件模板绑定错误 #

当前HTML里的mat-paginator配置存在绑定问题：

• 硬编码的pageIndex = "1"是静态字符串，没有用方括号做动态绑定，而mat-paginator的页码是从0开始计数的，硬编码值会导致初始页码状态错乱
• 组件内的分页状态和分页组件的状态没有做动态同步

修复后的模板配置：

<mat-paginator 
  [length]="length"
  [pageSize]="size"
  [pageIndex]="page - 1"
  [pageSizeOptions]="[5, 10, 25, 100]"
  (page)="onPaginate($event)">
</mat-paginator>

注意：去掉硬编码的pageIndex静态值，因为组件里的page是从1开始计数的，而mat-paginator的pageIndex是0基的，绑定时要减1才能对应上。

额外注意点 #

当前populateReferees的订阅回调里，直接把接口返回的limit赋值给this.size的逻辑本身没问题，但因为之前请求参数传递错误，接口返回的limit永远是服务端默认值，会把用户手动选择的pageSize给覆盖回去。等前面的参数传递逻辑修复后，这个覆盖逻辑就会恢复正常。

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