如何获取Angular Material表格中编辑单元格的位置？

你可以通过在触发方法时直接传递行数据、行索引、列标识这几个关键参数来解决这个问题，具体步骤如下：

1. 修改模板，传递必要参数 #

在你的<input>标签的keyup.enter事件中，除了$event，额外传入当前行的element、行索引i，以及当前列的名称（也就是matColumnDef对应的值）：

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="{{this.columnsToDisplay[3]}}">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{this.columnsToDisplay[3]}}</th>
    <td mat-cell *matCellDef="let element; let i=index">
      <mat-form-field class="form-input">
        <input type="number" matInput [(ngModel)]="quincenaUrl==1?element.dia2:element.dia17"
          <!-- 新增element、行索引i、列名参数 -->
          (keyup.enter)="editarCelda($event, element, i, columnsToDisplay[3])" />
      </mat-form-field>
    </td>
  </ng-container>

  <!-- 其他列和表格结构保持不变 -->
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky:true"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="element-row"></tr>
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No se han encontrado coincidencias</td>
  </tr>
</mat-table>

2. 组件方法接收并使用参数 #

修改editarCelda方法，接收新增的参数，这样就能直接拿到行、列信息：

editarCelda(event: any, rowData: any, rowIndex: number, columnName: string) {
  const newValue = event.target.value;
  console.log("Nuevo Valor", newValue);
  console.log("行索引", rowIndex);
  console.log("当前列名", columnName);
  console.log("当前行完整数据", rowData);
  
  // 这里可以根据行索引和列名做后续处理，比如更新数据源
  // this.dataSource.data[rowIndex][columnName] = newValue;
}

补充：动态列场景的通用处理 #

如果你的表格是通过*ngFor生成动态列（比如循环columnsToDisplay），只需要在循环时把当前列名传递进去即可，示例：

<ng-container *ngFor="let col of columnsToDisplay" matColumnDef="{{col}}">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>{{col}}</th>
  <td mat-cell *matCellDef="let element; let i=index">
    <!-- 根据列名绑定不同的字段，这里只是示例 -->
    <input type="number" matInput [(ngModel)]="element[col]"
      (keyup.enter)="editarCelda($event, element, i, col)" />
  </td>
</ng-container>

这样不管是固定列还是动态列，都能准确获取到编辑单元格的行、列位置信息。

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