如何在Angular Material v5.2表格的HTML中获取行索引？

没问题，在Angular Material v5.2的表格组件里获取行索引其实很直观，你可以通过模板内置的index变量来实现，下面给你两种适配你场景的常用方式：

1. 在单元格内直接获取索引（适配你的按钮场景） #

你的代码里name列的ng-container缺少了<mat-header-cell>和<mat-cell>的完整结构，先修正这个问题，然后在*matCellDef指令里声明索引变量，直接传给doSomething方法：

<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let element; let rowIndex = index"> 
    <!-- 把行索引作为参数传入doSomething -->
    <button (click)="doSomething(rowIndex)"> Do something</button>
  </mat-cell>
</ng-container>

对应的组件类方法可以这样写：

doSomething(rowIndex: number) {
  console.log("当前行索引：", rowIndex);
  // 这里处理你的业务逻辑
}

2. 在整行级别获取索引 #

如果需要在整行的上下文里使用索引（比如行点击事件），可以在*matRowDef里声明索引变量：

<mat-row *matRowDef="let row; let rowIndex = index; columns: displayedColumns;" 
         (click)="doSomething(rowIndex)"></mat-row>

注意事项 #

• 这里的rowIndex是当前数据源的行索引，如果表格开启了分页、过滤或排序，这个索引是经过处理后的当前页面/过滤结果的索引，不是原始数据的索引。
• 如果你需要原始数据的索引，建议在初始化数据源时，给每个数据对象添加一个originalIndex字段来存储原始位置。

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