Mat表格行内编辑问题：切换分页后编辑图标未正确刷新

问题核心原因 #

你用的index或dataIndex都是当前页的局部索引（从0开始计数），切换分页后，不同页的同位置行（比如第2行）会共用同一个局部索引，导致编辑状态绑定错误，出现串页问题。

可行解决方案 #

1. 给每行数据绑定全局唯一标识

在数据源初始化时，给每条数据添加全局唯一的标识字段（比如editId），同时新增isEditing字段跟踪编辑状态：

// 假设你的原始数据源是originalData
this.dataSource.data = originalData.map((item, globalIdx) => ({
  ...item,
  editId: globalIdx, // 用全局索引作为唯一标识，也可用UUID生成更稳妥的唯一值
  isEditing: false
}));

2. 模板中基于数据本身的状态控制编辑图标

不再依赖局部索引，直接用数据行的isEditing字段判断显示状态：

<ng-container matColumnDef="actions">
  <th mat-header-cell *matHeaderCellDef>操作</th>
  <td mat-cell *matCellDef="let row">
    <button *ngIf="!row.isEditing" (click)="startEditing(row)">
      <mat-icon>edit</mat-icon>
    </button>
    <div *ngIf="row.isEditing">
      <button (click)="saveEdit(row)">
        <mat-icon>save</mat-icon>
      </button>
      <button (click)="cancelEdit(row)">
        <mat-icon>close</mat-icon>
      </button>
    </div>
  </td>
</ng-container>

3. 组件中实现编辑状态切换逻辑

直接操作当前行的isEditing字段，修改后刷新表格数据订阅：

startEditing(row: any): void {
  // 可选：关闭其他行的编辑状态，避免多行同时编辑
  this.dataSource.data.forEach(item => item.isEditing = false);
  row.isEditing = true;
  // 刷新MatTable数据订阅
  this.dataSource._updateChangeSubscription();
}

saveEdit(row: any): void {
  // 执行你的保存逻辑（比如调用API提交修改）
  row.isEditing = false;
  this.dataSource._updateChangeSubscription();
}

cancelEdit(row: any): void {
  // 可选：恢复该行原始数据（如果需要）
  row.isEditing = false;
  this.dataSource._updateChangeSubscription();
}

替代方案（不修改数据源）

如果不想给数据源新增字段，可以维护一个单独的Set存储处于编辑状态的行唯一标识：

// 组件内定义
editingRowIds = new Set<number>();

startEditing(row: any): void {
  this.editingRowIds.clear();
  this.editingRowIds.add(row.editId); // 这里的editId还是需要全局唯一标识
}

saveEdit(row: any): void {
  this.editingRowIds.delete(row.editId);
  // 保存逻辑
}

模板中判断：

<button *ngIf="!editingRowIds.has(row.editId)" (click)="startEditing(row)">
  <mat-icon>edit</mat-icon>
</button>
<div *ngIf="editingRowIds.has(row.editId)">
  <!-- 保存/取消按钮 -->
</div>

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