Angular Material-Mat-Cell的编辑值

问题描述

我使用Angular 9 Mat Table在表中显示了数据

我动态遍历dataSource元素以获取列。

当我单击指定的单元格时，编辑单元格中有先前的值。

我想要的 输入另一个值后，请编辑所选单元格并升级该值。

存储库： https://stackblitz.com/edit/angular-editable-mat-cell-columns-iteratable-over-datasource

解决方法

这是一个非常简单的解决方案，只有您需要找到如何在编辑之间隐藏和显示输入

<ng-container matColumnDef="calculation">
    <th mat-header-cell *matHeaderCellDef> Calculation </th>
    <td mat-cell *matCellDef="let element,let i = index"> 
      <ng-container *ngIf="element.position!==editRowId">
      <span (click)="edit(element.position,'calculation')"> Edit </span>
       <span>Value calculated is: {{element.weight * inp.value}}</span>
      </ng-container>
      <ng-container>
        <span (click)="edit(element.position,'calculation')"> End </span>
      <input matInput #inp name="calculation" value="0" (blur)="editRowId=-1"> 
      </ng-container>
      </td>
  </ng-container>

这是结果