如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。