检测角度是否从Angular 8中的不同输入丢失?

问题描述 投票:0回答:1

我有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过滤器。结果是这样的:

enter image description here

[当我更改第一个输入(列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;
}
angular angular-material angular7 angular8
1个回答
1
投票

您当前正在使用[(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);
}
© www.soinside.com 2019 - 2024. All rights reserved.