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

【问题标题】：Angular Mat Table - Editing Individual column cellsAngular Mat Table - 编辑单个列单元格
【发布时间】：2020-03-24 00:57:39
【问题描述】：

我正在关注这个 stackblitz 演示，以便在材料表中制作可编辑的列 - 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" 是否适用于多种条件。

【问题讨论】：

标签： angular angular-material angular-material-table

【解决方案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>

【讨论】：

【解决方案2】：

我能够改为通过三元运算符动态添加 [readonly] 属性

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

您通过 (click) 事件传递索引的可编辑列位置

【讨论】：