如何在Angular Material表格中获取被点击列的索引

你原有写法无法生效的核心原因是：*matHeaderRowDef 中导出的index变量是行维度的索引，表头区域仅存在1行表头行，这个值恒为0，完全无法对应到列的位置，因此拿不到目标列索引。
同时你把点击事件绑定在整行<tr>上，事件触发时默认只能拿到行层面的信息，无法直接感知到具体点击的是哪一列。

不要把点击事件绑定在表头行上，转而绑定到每一个表头单元格（<th mat-header-cell>）上，直接在渲染列的时候传入列索引，逻辑稳定不依赖DOM结构：

• 调整模板代码，在遍历列生成表头单元格时直接绑定事件传参

<!-- 遍历列定义生成每一列的表头和单元格 -->
<ng-container *ngFor="let col of displayedColumns; let colIdx = index">
  <th mat-header-cell *matHeaderCellDef (click)="handleHeaderColClick(colIdx, col)">
    <!-- 这里替换成你原有表头的展示内容，比如列名、排序按钮等 -->
    {{ col }}
  </th>
  <td mat-cell *matCellDef="let row">
    <!-- 这里替换成你原有单元格的展示内容 -->
    {{ row[col] }}
  </td>
</ng-container>

<!-- 表头行、数据行不需要绑定点击事件，保留原有配置即可 -->
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

• 在组件TS文件中编写事件处理方法

handleHeaderColClick(columnIndex: number, columnKey: string): void {
  // 这里就可以拿到准确的列索引、列标识，写后续业务逻辑
  console.log('被点击列的索引：', columnIndex, '对应列名：', columnKey);
}

如果你一定要把事件绑定在<tr>表头行上，可以通过事件源对象反查DOM位置拿到列索引，但这种方式依赖页面DOM结构，一旦组件内部DOM结构调整、或者单元格内有嵌套元素就容易失效：

• 模板部分给行绑定事件，传入原生事件对象

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" (click)="handleRowClick($event)"></tr>

• TS部分通过DOM查询拿到列索引

handleRowClick(event: Event): void {
  // 向上查找最近的th表头单元格
  const clickedCell = (event.target as HTMLElement).closest('th');
  if (!clickedCell) return;
  // 获取当前行下所有th，查找点击元素的位置
  const cellList = Array.from(clickedCell.parentElement?.querySelectorAll('th') || []);
  const colIndex = cellList.indexOf(clickedCell as HTMLTableHeaderCellElement);
  console.log('被点击列索引：', colIndex);
}

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