Angular p-paginator修改每页行数时页码随机跳转Bug排查

该现象不是PrimeNG组件Bug，属于分页组件状态绑定缺失、分页参数计算逻辑不匹配导致的使用问题。

• 后端基于Spring Boot编写分页接口，接收page页码、size每页条数参数返回分页结果
• 前端Angular项目结合PrimeNG的p-table、独立p-paginator实现表格分页
• 仅切换页码时接口请求、分页表现正常；修改每页显示行数时，分页器会自动跳转到非预期页码，未停留在当前浏览位置

PrimeNG的p-paginator是无状态组件，不会自动维护分页位置，所有分页状态（起始条目偏移first、每页条数rows、总条数totalRecords）都需要使用者手动绑定同步。
原有代码仅绑定了rows和totalRecords两个属性，缺失first（当前页第一条数据在全量数据中的偏移索引）属性的绑定。当每页条数变更时，组件无法基于正确的当前偏移计算目标页码，就会出现随机跳页的问题。
另外原有逻辑直接取事件返回的page值+1传给后端，没有基于实际偏移量做页码校准，也会放大跳页的异常表现。

1. 补全分页状态变量
   在Angular组件TS层补充first偏移量变量初始化：

   // 当前页第一条数据的偏移索引，从0开始
   first: number = 0;
   currentPage: number = 1;
   rows: number = 10;
   totalRecords: number = 0;
   persons: any[] = [];
   

2. 补全分页器模板属性绑定
   给p-paginator标签补充first属性绑定，让组件能正确识别当前分页位置：

   <p-paginator
     (onPageChange)="handlePagination($event)"
     [rows]="rows"
     [first]="first"
     [rowsPerPageOptions]="[10,25,50]"
     [totalRecords]="totalRecords"
   ></p-paginator>
   

3. 修正分页事件处理逻辑
   重写分页回调方法，基于偏移量计算传给后端的页码，避免直接依赖事件返回的page值：

   public handlePagination(paginationData: any): void {
     // 同步分页状态
     this.first = paginationData.first;
     this.rows = paginationData.rows;
     // 按后端页码规则计算参数：如果后端页码从1开始，偏移/每页条数+1即可；如果后端从0开始则去掉+1
     this.currentPage = Math.floor(this.first / this.rows) + 1;
     // 拉取分页数据
     this.getAll(this.currentPage, this.rows);
   }
   

如果需要修改每页行数时强制回到第一页，而非保持当前浏览的数据位置，可以在检测到rows变化时重置first=0、currentPage=1再发起请求。

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