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

哈里，在示例中考虑了两种类型的单元格

可编辑内容：

<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]属性

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

您通过（单击）事件在索引上传递的editableColumn

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

2 个答案: