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

【问题标题】：How do I display input change in a dialog in Angular?如何在 Angular 的对话框中显示输入更改？
【发布时间】：2019-09-23 08:13:18
【问题描述】：

我有一个显示数字的对话框。在最后一行中，我想显示这 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>

【问题讨论】：

标签： html angular typescript dynamic dialog

【解决方案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
    });
}

【讨论】：

【解决方案2】：

您可以在组件中使用 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>

【讨论】：

我认为他需要在更改时动态填充所有值。有了上述内容，它就不会在每一刻都是动态的。
为什么这么说！？这是获取属性绑定，表单中的每个值更改都会重新计算 sum 属性。请测试该代码并查看结果！