Mat分页异常：Mat-table仅显示前5条数据且无法更新

你的核心问题出在行索引的使用逻辑和表单组的关联方式上，导致分页切换后表单组匹配错误，看起来数据没更新。以下是具体分析和修复方案：

问题根源 #

*matCellDef里的rowIndex是当前分页页面的本地索引（比如第二页第一行的rowIndex是0），但你创建表单组时用的是全局数据源的索引（row0到row17）。切换分页后，用本地索引去匹配全局索引的表单组，自然会拿到错误的表单数据，视觉上就表现为表格只显示前5条记录。

虽然你已经设置了dataSource.paginator = this.paginator，但表单关联错误掩盖了分页的实际效果。

修复步骤 #

1. 给数据源添加唯一标识 #

初始化数据时，给每个数据项添加唯一的rowId，用来精准关联对应的表单组：

ngOnInit() {
  this.dataSource.data = [
    { rowId: 0, name: 'John', age: 1 },
    { rowId: 1, name: 'Jane', age: 2 },
    { rowId: 2, name: 'Mike', age: 3 },
    { rowId: 3, name: 'John', age: 4 },
    { rowId: 4, name: 'Jane', age: 5 },
    { rowId: 5, name: 'Mike', age: 6 },
    { rowId: 6, name: 'John', age: 7 },
    { rowId: 7, name: 'Jane', age: 8 },
    { rowId: 8, name: 'Mike', age: 9 },
    { rowId: 9, name: 'John', age: 10 },
    { rowId: 10, name: 'Jane', age: 11 },
    { rowId: 11, name: 'Mike', age: 12 },
    { rowId: 12, name: 'John', age: 13 },
    { rowId: 13, name: 'Jane', age: 14 },
    { rowId: 14, name: 'Mike', age: 15 },
    { rowId: 15, name: 'John', age: 16 },
    { rowId: 16, name: 'Jane', age: 17 },
    { rowId: 17, name: 'Mike', age: 18 },
  ];

  // 用rowId作为表单组的唯一key
  this.dataSource.data.forEach((data) => {
    const rowFormGroup = this.formBuilder.group({
      name: [data.name],
      age: [data.age],
    });
    this.tableFormGroup.addControl(`row${data.rowId}`, rowFormGroup);
  });
}

2. 修改表单组获取逻辑 #

不再依赖本地rowIndex，而是通过当前行的rowId获取对应的表单组：

getFormGroup(row: any): FormGroup {
  return this.tableFormGroup.get(`row${row.rowId}`) as FormGroup;
}

3. 更新HTML模板 #

把模板里的getFormGroup(rowIndex)改成getFormGroup(row)：

<!-- Name列 -->
<td mat-cell *matCellDef="let row; let rowIndex = index">
  <ng-container [formGroup]="getFormGroup(row)">
    <input matInput formControlName="name" [readonly]="true" />
  </ng-container>
</td>

<!-- Age列 -->
<td mat-cell *matCellDef="let row; let rowIndex = index">
  <ng-container [formGroup]="getFormGroup(row)">
    <input matInput formControlName="age" [readonly]="true" />
  </ng-container>
</td>

验证效果 #

现在切换分页时，每个行都会匹配到自己对应的表单组，表格数据会正确更新，分页功能也会正常生效。

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