Angular 以8的形式获得总计

我想得到每一行中输入的值，并得到这些行的总和

我的HTML：

<ng-container formArrayName="cap_values">
    <tbody *ngFor="let item of capValues.controls; let i=index" [formGroupName]="i">
        <tr>
            <td class="freeze-first-col"><input type="text" (blur)="getName(item.value.name)" formControlName="name"></td>
            <td><input type="number" formControlName="fdnTotalShares"</td>
        </tr>
    </tbody>
</ng-container>

---

如何迭代数组中的每个值并求和？我已经看到了

.valueChanges

，但不完全确定如何使用它。

您可以通过表单控件进行循环

let total = 0;
form.controls.foreach(data => {
  total += data.fdnTotalShares.value;
})

---

为了确保使用控制台日志获取正确的表单控件，有多种方法可以做到这一点，我将写下一些：

第一条路：

get capValues(): FormArray {
    return this.form.get('cap_values') as FormArray;
}

getSum() {
    this.sum = this.capValues.value.reduce((prev, next) => prev + +next.fdnTotalShares, 0);
    // OR
    // this.sum = this.capValues.getRawValue().reduce((prev, next) => prev + +next.fdnTotalShares, 0);
}

请注意，

+

登录

+next.fdnTotalShares

，这不是一个错误，它是为了确保您得到的是数字的总和（假设

fdnTotalShares

始终是一个数字），而不是字符串连接

第二种方式：

this.sum = 0;
this.capValues.value.forEach(x => {
      this.sum += +x.fdnTotalShares;
});

如果您有一些禁用的控件，并且希望将它们包括在计算中，则可以使用

getRawValue（）

而不是

value

是一个stackblitz示例，演示了这一点（我还包括了

启用

和

禁用

控件的区别）

编辑：为了回答您在评论中的问题，这与我上面写的sum示例类似：

multiplyAndStore() {
    const multiplicationRes = this.capValues.value.reduce((prev, next) => prev * +next.fdnTotalShares, 1);
    // Assuming that "formControlName" for multiplication result input is 'multiplyResult'
    this.form.get('multiplyResult').setValue(multiplicationRes);
    // You can also use "patchValue" method instead of "setValue"
    // this.form.get('multiplyResult').patchValue(multiplicationRes);
}

我已经更新了示例，以便您可以看到这一点

希望这有帮助。

我已经试过了

---

使用可观察的

valueChanges

来实现这一点

在组件中，创建表单后，订阅表单数组

cap\u values

中的

valueChanges

从'rxjs'导入{Subscription}；
总数：数字=0；
认购：认购；
恩戈尼尼特（）{
//在这里创建您的表单
this.subscription=this.capValues.valueChanges.subscription（数据=>{
this.total=data.reduce（（a，b）=>a++b.fdntottalshares，0）
});
}
获取capValues（）{
将此.form.get（'cap_values'）作为FormArray返回；
}

现在，只要使用

{{total}}

在模板中显示总计，它就会随着您更改

fdntottalshares

输入中的值而动态更新

最后，不要忘记取消订阅

valueChanges

。这就是为什么我引入了

subscription

变量，如上面的代码片段所示

ngondestory（）{
this.subscription.unsubscripte（）；
}

---

这里是一个简单的工作示例。

您什么时候需要行的总和？@AbuTaha输入值后，我有一个

（keyup.enter）

函数是的，非常感谢！我还有一个问题。假设我有两个输入框。我想将这2的值乘以倍数，并将其显示在另一个框中。如何从乘法中检索值并使用它？这另一个文本框有一个FormControlName我已经更新了答案以包含此评论的答案。您可以按任意方式进行乘法（在本例中，我将数组中的值相乘），然后在另一个输入中设置该结果。您好，抱歉，只看到了您对我的评论的回答。我想乘以的两个值不是相同的

FormControl

。它位于相同的

FormArray

，但不同的

FormControl

multiplyAndStore() {
    const multiplicationRes = this.capValues.value.reduce((prev, next) => prev * +next.fdnTotalShares, 1);
    // Assuming that "formControlName" for multiplication result input is 'multiplyResult'
    this.form.get('multiplyResult').setValue(multiplicationRes);
    // You can also use "patchValue" method instead of "setValue"
    // this.form.get('multiplyResult').patchValue(multiplicationRes);
}

 console.log(this.form.length);
 console.log(this.form.value);