如何在Angular Material表格中双击单元格获取列名？

要实现双击单元格获取对应列名，需要把双击事件从<tr mat-row>移到每个<td mat-cell>上，同时传递该列的定义标识（即matColumnDef的值）。

1. 修改模板中的单元格事件 #

给每个列的<td mat-cell>绑定双击事件，传入当前行数据和对应列名：

<!-- 第一列示例 -->
<ng-container matColumnDef="DT_primaInstallazione">
  <th mat-header-cell *matHeaderCellDef> Data prima installazione </th>
  <td mat-cell *matCellDef="let row" (dblclick)="openFilters(row, 'DT_primaInstallazione')"> 
    {{row.DT_primaInstallazione | date: 'dd/MM/YYYY'}} 
  </td>
</ng-container>

<!-- 第二列示例 -->
<ng-container matColumnDef="DT_fineGaranziaHW">
  <th mat-header-cell *matHeaderCellDef> Data fine garanzia HW </th>
  <td mat-cell *matCellDef="let row" (dblclick)="openFilters(row, 'DT_fineGaranziaHW')"> 
    {{row.DT_fineGaranziaHW | date: 'dd/MM/YYYY'}} 
  </td>
</ng-container>

<!-- 其余列按相同逻辑修改，确保每个mat-cell都绑定dblclick并传入对应列名 -->

同时移除整行上的双击事件：

<tr mat-row *matRowDef="let row; columns: subdisplayedColumns"></tr>

2. 更新组件中的openFilters方法 #

在组件类里修改方法，接收行数据和列名参数，通过switch逻辑打开对应对话框：

openFilters(row: any, columnName: string): void {
  switch(columnName) {
    case 'DT_primaInstallazione':
      // 打开首次安装日期对应的对话框
      // this.dialog.open(InstallDateDialogComponent, { data: row });
      console.log('触发首次安装日期对话框', row);
      break;
    case 'DT_fineGaranziaHW':
      // 打开硬件保修截止日期对应的对话框
      // this.dialog.open(WarrantyDateDialogComponent, { data: row });
      console.log('触发硬件保修日期对话框', row);
      break;
    case 'anniGaranzia':
      // 打开保修年限对应的对话框
      console.log('触发保修年限对话框', row);
      break;
    // 依次添加其他列的case逻辑
    default:
      console.log('未匹配到列：', columnName);
      break;
  }
}

逻辑说明 #

之前把事件绑定在整行上，无法区分点击的具体单元格。将事件绑定到每个单元格后，直接传递该列的matColumnDef标识，就能精准识别双击的列，进而执行对应的对话框打开逻辑。

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