Question

当用户在现有表中添加新行时，是否可以使列可编辑？？

am使用物料表，在此成功填充api数据。我想编辑特定的列以在用户添加新行时更改值并将其保存在本地存储中。

在上面的示例中，我应该在addNewRow()中使用哪个mat-table类

摘要：

this.isColumnEditable  = false;
     addNewRow() {
        let data: Element[] = [];
        if (this.table.dataSource) {
          data = (this.table.dataSource as Element[]);
        }
        data.push(ELEMENT_DATA[data.length]);
        this.table.dataSource = data;
        this.isColumnEditable  = true;
        this.table.renderRows();
      }
    }

一旦在新行上进行编辑，我需要将其与现有数据源一起保存

更新为1

基于标志，只是将表列替换为可编辑的输入字段，但抛出错误。

<ng-container matColumnDef="title">
                <th mat-header-cell *matHeaderCellDef> naming list </th>
                <td mat-cell *matCellDef="let element"> {{element.title}} </td>
              </ng-container>

              <ng-container *ngIf = 'isColumnEditable == true' matColumnDef="title">

                <mat-cell *matCellDef="let element">
                  <mat-form-field floatLabel="never">
                    <input [value]="element.title" [(ngModel)]="element.title">
                  </mat-form-field>
                </mat-cell>
              </ng-container>

Err：ERROR Error: Duplicate column definition name provided: "title".

已更新：2 [尝试过* ngIf..else]失败

<ng-container *ngIF = 'isisColumnEditable == true; else shownormalColumn'>
                <th mat-header-cell *matHeaderCellDef> List of Values </th>
                <td mat-cell *matCellDef="let element"> 
                    <mat-cell *matCellDef="let element">
                        <mat-form-field floatLabel="never">
                            <input [value]="element.title" [(ngModel)]="element.title">
                        </mat-form-field>
                    </mat-cell>
                </td>
            </ng-container >

            <ng-template #shownormalColumn matColumnDef="title">
                <th mat-header-cell *matHeaderCellDef> List of Values </th>
                <td mat-cell *matCellDef="let element"> {{element.title}} </td>
            </ng-template>

注意：我不希望用户编辑现有数据，但应仅对新添加的列进行编辑（行内）。

Angular 6 Material表-添加新行并保存更改时可编辑的列-[ngIf..else也不起作用]

0 个答案: