Mat-Table搭配分页器时，编辑/删除无法传递正确索引

我之前也踩过这个坑！当用了Material分页器之后，模板里拿到的index确实只是当前页的行索引（从0开始），不是整个数据源数组里的真实位置。这里有两个实用的解决办法，推荐你优先用第二个：

方法一：直接传递当前行的元素（最稳妥） #

其实Mat-Table的*matCellDef已经帮我们把当前行对应的数据源项暴露出来了，直接把这个元素传到点击函数里就行，完全不用管索引的事儿！

模板代码：

<ng-container matColumnDef="edit">
  <th mat-header-cell *matHeaderCellDef> 操作 </th>
  <td mat-cell *matCellDef="let element">
    <mat-icon (click)="onEdit(element)" class="cursor-pointer">edit</mat-icon>
  </td>
</ng-container>

组件代码：

// 假设你的数据类型是YourDataInterface
onEdit(item: YourDataInterface) {
  // 直接使用item即可，比如打开编辑弹窗、修改数据等
  console.log("要编辑的项：", item);
}

这个方法的好处是不管分页、排序、过滤怎么变，你拿到的都是当前显示的那一行对应的真实数据，完全不会出错，代码还简洁。

方法二：计算真实索引（适合必须用索引的场景） #

如果因为某些业务需求必须用到索引，那可以结合分页器的pageIndex和pageSize来计算整个数据源中的真实位置。不过要注意，如果同时用了过滤或排序，得用经过处理后的filteredData而不是原始的data数组。

模板代码：

<ng-container matColumnDef="edit">
  <th mat-header-cell *matHeaderCellDef> 操作 </th>
  <td mat-cell *matCellDef="let element; let currentPageIndex = index;">
    <mat-icon (click)="onEdit(currentPageIndex)" class="cursor-pointer">edit</mat-icon>
  </td>
</ng-container>

组件代码：

onEdit(currentPageIndex: number) {
  // 确保分页器已和数据源关联
  if (!this.dataSource.paginator) return;

  const { pageIndex, pageSize } = this.dataSource.paginator;
  // 计算真实索引
  const realIndex = pageIndex * pageSize + currentPageIndex;
  
  // 如果有过滤/排序，用filteredData获取处理后的数据
  const targetItem = this.dataSource.filteredData[realIndex];
  // 如果没有过滤排序，也可以用this.dataSource.data[realIndex]
  console.log("要编辑的项：", targetItem);
}

两种方法里，第一种绝对是首选，不仅代码少，还能避免各种边界情况（比如分页器未初始化、过滤后数据变化等）。

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