检测 Angular 8 中因不同输入而丢失的焦点？

Question

我有 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 方法是什么？

编辑： 我应该说我的输入位于 material table:

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

Answer 1

您目前正在使用 [(ngModel)] 将输入值双向绑定到您的模型。要收听值更改，您可以处理 (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);
}

检测 Angular 8 中因不同输入而丢失的焦点？

Detect focus lost from different input in Angular 8?

angular-material

angular

angular7

angular8