Angular Material - mat-cell的编辑值[关闭]

【问题标题】：Angular Material - editing value of mat-cell [closed]Angular Material - mat-cell的编辑值[关闭]
【发布时间】：2023-04-03 10:36:02
【问题描述】：

我有使用 Angular 9 Mat Table 在表格中显示的数据

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

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

我想要什么 在我输入另一个值后编辑选定的单元格并升级此值。

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

【问题讨论】：

尝试在输入上使用 (change)='changeHandler(element)' ，在更改处理程序中您可以修改属性计算

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

【解决方案1】：

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

<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>

这是结果

【讨论】：