Как отобразить изменение ввода в диалоге в Angular? - PullRequest
Новая
       12

Как отобразить изменение ввода в диалоге в Angular?

0 голосов
/ 05 мая 2019

У меня есть диалоговое окно, в котором отображаются цифры. В последнем ряду я хочу отобразить сумму этих 10 чисел, в то время как пользователь меняет эти числа. Так, например, если пользователь меняет 50 на 60, я хочу, чтобы в последней строке отображалось 110. Какой хороший способ реализовать это? После некоторого html диалога:

enter image description here

<h1 mat-dialog-title>Rechenleistung anpassen</h1>
<div mat-dialog-content [formGroup]="form">

  <mat-form-field>
    <input matInput type="number" #input placeholder="Leistung von Miner 1" formControlName="power1"
           required min="1" max="100">
  </mat-form-field>

  <mat-card-content>
    Die Leistung muss insgesamt 100 sein! Momentane Leistung: {{power1 + power2 + power3 + power4 +
    power5 + power6 + power7 + power8 + power9 + power10}}
  </mat-card-content>

</div>
<div mat-dialog-actions>
  <button mat-raised-button (click)="close()">Zurück</button>
  <button mat-raised-button (click)="save()" cdkFocusInitial>Senden</button>
</div>

Ответы [ 2 ]

1 голос
/ 05 мая 2019

Обновите ваш HTML следующим образом: 

 <mat-card-content>
    Die Leistung muss insgesamt 100 sein! Momentane Leistung: {{sum}}
  </mat-card-content>

создайте переменную, которая возвращает сумму, и запустите этот метод после построения формы: 

populateSum() {
    this.form.valueChanges.subscribe(res => {
    this.sum = this.form.get('power1').value +
    this.form.get('power2').value + this.form.get('power3').value + this.form.get('power4').value + this.form.get('power5').value + this.form.get('power6').value + this.form.get('power7').value + this.form.get('power8').value + this.form.get('power9').value + 
    this.form.get('power10').value
    });
}
0 голосов
/ 05 мая 2019

Вы можете использовать свойство get в своем компоненте. предположим, что ваша форма определена в вашем файле app.component.ts. определите свойство get, как показано ниже: 

get sum(){
  return this.form.get('power1').value + this.form.get('power2').value;
}

и ваш HTML-файл: 

<mat-card-content>
    Die Leistung muss insgesamt 100 sein! Momentane Leistung: {{sum}}
</mat-card-content>
...