html - 如何在 Angular 的对话框中显示输入更改？

Question

我有一个对话框，它显示数字。在最后一行中，我想显示这 10 个数字的总和，而用户更改这些数字。因此，例如，如果用户将 50 更改为 60，我希望最后一行显示 110。什么是实现它的好方法？在对话框的一些 html 之后：

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

标签： htmlangulartypescriptdynamicdialog

Answer 1

更新您的 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
    });
}