angular - 如何在 mat-table 中选择一个单元格（Angular 7）

Question

我正在使用有角度的材料mat-table来显示数据。好吧，当您单击一个单元格时，会显示一个输入字段并且隐藏跨度标签。

但就我而言，这一行中的每个单元格都显示一个输入字段，如您在屏幕截图中所见：

我的ngIf-Statement 如下所示：

显示跨度标签：!editable || (selectedRowIdx !== idx)

显示输入标签：可编辑 && (selectedRowIdx == idx)

<ng-container matColumnDef="TYPE">
  <mat-header-cell *matHeaderCellDef> TYPE </mat-header-cell>
  <mat-cell *matCellDef="let elem; let idx = index" (click)="testFocusIn(elem.TYPE)">
    <span *ngIf="!editable || (selectedRowIdx !== idx)">{{elem.TYPE}}</span>
    <mat-form-field *ngIf="editable && (selectedRowIdx == idx)"> 
      <input matInput [(ngModel)]="elem.TYPE" [appAutoFocus]="(focus === elem.TYPE)">
    </mat-form-field>
  </mat-cell>
</ng-container>

<ng-container matColumnDef="NAME">
  <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
  <mat-cell *matCellDef="let elem; let idx = index" (click)="testFocusIn(elem.NAME)">
    <span *ngIf="!editable || (selectedRowIdx !== idx)">{{elem.NAME}}</span>
    <mat-form-field *ngIf="editable && (selectedRowIdx == idx)"> 
      <input matInput [(ngModel)]="elem.NAME" [appAutoFocus]="(focus === elem.NAME)">
    </mat-form-field>
  </mat-cell>
</ng-container>

我还能检查什么？也许定义一个ID标签？

标签： angularangular7mat-tableangular-material-7

Answer 1

目前您只检查一个“坐标”，这意味着您只检查要编辑的行，而不是该行中的哪一列。因此，您无法唯一标识要编辑的单元格。

我没有找到一个干净的解决方案，但是 这个 stackblitz 显示了一个有效的解决方案来解决您的问题。

当我们点击一​​个单元格时，我们设置当前可编辑index和当前可编辑column。这有助于我们唯一标识要编辑的单元格。

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element; let i = index;" (click)="edit(i, 'name')">
    <span *ngIf="showValue(i, 'name')">{{element.name}}</span>
    <mat-form-field *ngIf="showInput(i, 'name')"> 
      <input matInput placeholder="Placeholder">
    </mat-form-field>
  </td>    
</ng-container>

在组件中

edit(index: number, column: string) {
  this.editableColumn = column;
  this.editableIndex = index;
}

showInput(index: number, column: string) {
  return this.editableColumn === column && this.editableIndex === index;
}

showValue(index: number, column: string) {
  return this.editableColumn !== column || this.editableIndex !== index;
}

column从某种意义上说，我们必须将模板中的名称 3 次传递给函数，并且所有函数调用都对模板造成了相当大的污染，这有点难看。但我确信通过一些重构，您可以提出一个干净的解决方案（一种简化是使用模板变量，ng-template这样可以摆脱一个函数调用）。