我有2个输入,其中一个具有数字值:
<input matInput class="form-control"
[(value)]="row.value"
([ngModel])="row.value">
第二个输入将计算该值-20€的值。
<input matInput class="form-control"
value="{{ row.value - 20 | round }}"
([ngModelChange])="row.value">
而且我还应用了round
过滤器。结果是这样的:
[当我更改第一个输入(列Retail value
)的值时,我希望能够从第二个输入(Total cost
)捕获并重新计算。可能是最粗略的方式。
所以我的问题是:
最佳的Angularish方法是什么?
编辑:我应该说,我的输入位于材料表中:
<mat-table [dataSource]="dataSource" class="table">
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef > Retail Value </mat-header-cell>
<td mat-cell *matCellDef="let row">
<input matInput class="form-control"
[(value)]="row.value"
([ngModel])="row.value"
(ngModelChange)="updateTotal(row)">
</td>
</ng-container>
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef > Retail Value </mat-header-cell>
<td mat-cell *matCellDef="let row">
<input matInput class="form-control"
[(value)]="row.total">
</td>
</ng-container>
</mat-table>
和我的。ts函数:
updateTotal(row: RepairItem) {
row.total = row.value - row.discount;
}
您当前正在使用[(ngModel)]
2种方式将输入值绑定到模型。要收听值更改,您可以处理(ngModelChange)
事件。
component.html
<input matInput class="form-control"
[(ngModel)]="row.value"
(ngModelChange)="onModelChange(row)">
component.ts
onModelChange(row) {
// row.value has been updated to the new value
// you also have a reference to the original row,
// should you need to do anything with it
console.log(row.value);
}