angular2动态表格计算总金额

正在尝试计算总支付额。金额（支付额是一种形式）。不知道如何正确操作，因此总数将观察当前和新金额的变化。以下是一个plnkr，我将其作为基本代码：

我添加了一个函数：

// calculate a sum of all payoffs
sumPayOffs() {
  return this.myModel.payOffs.reduce((sum, val) => sum + val.amount, 0);
}

在HTML中（就在“添加付款”按钮之前），我添加了只读数字字段，显示金额：

<td>
  <input type="number" step="0.01" class="sum" readonly size=6 [value]="sumPayOffs()">
</td>
<td colspan="3" style="text-align: center; padding: .5em;">
  <button (click)="addPayOff($event)" 
          style="color: white; background: rgba(0, 150, 0, 1)">Add Pay Off</button>
</td>

加上还清

我将付款字段类型从文本更改为数字，所以插入模式的值将是数字

更新的plunker:

我添加了一个函数：

// calculate a sum of all payoffs
sumPayOffs() {
  return this.myModel.payOffs.reduce((sum, val) => sum + val.amount, 0);
}

在HTML中（就在“添加付款”按钮之前），我添加了只读数字字段，显示金额：

<td>
  <input type="number" step="0.01" class="sum" readonly size=6 [value]="sumPayOffs()">
</td>
<td colspan="3" style="text-align: center; padding: .5em;">
  <button (click)="addPayOff($event)" 
          style="color: white; background: rgba(0, 150, 0, 1)">Add Pay Off</button>
</td>

加上还清

我将付款字段类型从文本更改为数字，所以插入模式的值将是数字

---

更新的plunker:

或者您可以通过订阅构造函数中的更改来观察整个表单数组的更改

this.form.controls.payOffs.valueChanges.subscribe((change) => {
  const calculateAmount = (payoffs: any[]): number => {
    return payoffs.reduce((acc, current) => {
       // also handling case when a new pay off is added with amount of null
       return acc + parseFloat(current.amount || 0);
    }, 0);
  }

  console.log(calculateAmount(this.form.controls.payOffs.value));
});

---

也可以通过订阅构造函数中的更改来观察整个表单数组的更改

this.form.controls.payOffs.valueChanges.subscribe((change) => {
  const calculateAmount = (payoffs: any[]): number => {
    return payoffs.reduce((acc, current) => {
       // also handling case when a new pay off is added with amount of null
       return acc + parseFloat(current.amount || 0);
    }, 0);
  }

  console.log(calculateAmount(this.form.controls.payOffs.value));
});

---

我把@danny's console.log（）添加到我的plunker中：太棒了！谢谢你，这很有效！另一个问题：如何在表单中以相同的方式显示总计？@Alla您可以将缩减结果保存到组件的属性中，并在表单上显示。用plunkr检查一下安德烈的解决方案，它在表中显示总数。Thanx@danny。你们有skype或smth吗？我把@danny's console.log（）添加到我的插件中：太棒了！谢谢你，这很有效！另一个问题：如何在表单中以相同的方式显示总计？@Alla您可以将缩减结果保存到组件的属性中，并在表单上显示。用plunkr检查一下安德烈的解决方案，它在表中显示总数。Thanx@danny。你们有skype或smth吗？谢谢@Andrey！我还试图在模型和表单控件中包含total。模型工作正常，但控件未显示值。。有什么想法吗？请更新你或我的plunker（应该显示上述两个值）并指出问题所在，我会尽力帮助你谢谢@Andrey！我还试图在模型和表单控件中包含total。模型工作正常，但控件未显示值。。有什么想法吗？请更新您或我的plunker（它应该显示上述两个值）并指出问题所在，我会尽力帮助您