如何在Angular材料表中获取编辑单元格位置

Question

我得到这张桌子的棱角材质

<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"
          (keyup.enter)="editarCelda($event)" />
      </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>

当我在课堂上编辑一个值并按 Enter 时，我得到了事件

editarCelda(event: any) {
 console.log("Nuevo Valor", event.target.value);
}

而且我知道如何获取值，但我不知道如何获取编辑的行和列，即编辑单元格的位置

有什么想法吗？

谢谢

Answer 1

调用editarCelda方法时传递行和列

<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"
          (keyup.enter)="editarCelda($event, i, this.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>

editarCelda(event, row, col) {
  ...
}

Answer 2

editarCelda(event: any) {
  // Get the value of the edited cell
  const newValue = event.target.value;

  // Get the index of the current row (the edited cell is in this row)
  const rowIndex = event.target.parentElement.parentElement.index;

  // Get the name of the column by using the interpolation in the matColumnDef
  // directive (in this case, the name of the column is the fourth element
  // in the columnsToDisplay array)
  const columnName = this.columnsToDisplay[3];

  console.log(`Row: ${rowIndex}, Column: ${columnName}`);
}