Angular Mat Table - 编辑单个列单元格

Question

我正在按照这个 stackblitz 演示在 Materials 中创建可编辑的列 Table - https://stackblitz.com/edit/angular-g5u7cy

以上示例使所有字段都可编辑，所以我一直在尝试使单个列单元格可编辑。

template :
<ng-container matColumnDef="location">
        <th mat-header-cell *matHeaderCellDef> Location </th>
        <td mat-cell *matCellDef="let element;let index = index">
          <mat-form-field floatLabel="never" 
          [ngClass]="editMode ? 'no-underline': ''">
         <input matInput [value]="element.workLocation" [(ngModel)]="element.workLocation" (click)="toggleEdit(index)" [readonly]="editMode && index == editableColumn">
         </mat-form-field>
         </td>
</ng-container>

ts toggle function: 
toggleEdit(index){
  this.editMode=false;
  this.editableColumn=index;
}

但是无法为要启用编辑的特定单元格设置只读属性，不确定 [readonly]="editMode && index == editableColumn" 是否适用于多种条件。

Answer 1

Hari，考虑到示例中有两种类型的单元格

可编辑：

<mat-cell *matCellDef="let element">
    <mat-form-field floatLabel="never">
        <input matInput placeholder="Name" [value]="element.name" 
                 [(ngModel)]="element.name">
    </mat-form-field>
</mat-cell>

无可编辑内容

<mat-cell *matCellDef="let element">
   {{element.name}}
</mat-cell>

Answer 2

我能够通过三元运算符动态添加 [只读] 属性

[readonly]="index == editableColumn ? 'false' : 'true'"

where editableColumn 你通过（点击）事件传递索引

Angular Mat Table - 编辑单个列单元格

Angular Mat Table - Editing Individual column cells

angular

angular-material

angular-material-table