Обнаружить потерю фокуса с другого входа в Angular 8? - PullRequest
0 голосов
/ 25 февраля 2020

У меня есть 2 входа, один из них имеет значение цифры c:

<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) и пересчитать его. Наиболее ангулярный sh способ возможен.

Итак, мой вопрос:

Какой лучший Angulari sh способ сделать это?

Редактировать: Я должен был сказать, что мои входы расположены в таблице материалов:

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

1 Ответ

1 голос
/ 25 февраля 2020

В настоящее время вы используете двустороннюю привязку входного значения к вашей модели, используя [(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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...