Angular 从总计行中获取总计

我不知道如何选择所有行上的所有总计并自动计算总计？就像我在总数中所做的一样，我只得到价格和数量的值，但是如何选择全部，以便能够自动计算。如何将所有总计行的总计相加

html

---

在组件中创建和运行，如

calculateGrandTotal():number:{
return myForm.controls.rows.controls.sum()
 var total = 0
    myForm.controls.rows.controls.forEach( function(item){
      total+=item.quantity.value*item.price.value
    })
    return total
}

然后是html

 <div class="float-right">
  Grand Total:{{calculateGrandTotal()}}

您可以在这里简单地使用数组映射和reduce

---

您有一个grand_total的输入。是否希望用户插入或显示为文本？仅显示它，用户无法在其中输入。输入被禁用。它是从所有总行中自动计算出来的。它说“AbstractControl”类型上不存在属性控件。我认为它需要类型化。。您正在表单中使用formArray另一个错误是错误：无法找到路径为“rows->grand_total”的控件，该路径与您在html中设置的formControlName相关。。你在formbuilder中设置了吗？是的，我设置了。this.myForm=this.fb.group{rows:this.fb.array[]，reference:new FormControl，date:new FormControl，grand_total:new FormControl}请在代码中添加一些解释，以便更好地理解它！

calculateGrandTotal():number:{
return myForm.controls.rows.controls.sum()
 var total = 0
    myForm.controls.rows.controls.forEach( function(item){
      total+=item.quantity.value*item.price.value
    })
    return total
}

 <div class="float-right">
  Grand Total:{{calculateGrandTotal()}}

Grand Total:  <input type="number" class="col-md-5" formControlName="grand_total" [ngModel]="calculateTotal()" required disabled>

calculateTotal():number{
    let rows = this.myForm.get('rows') as FormArray;
   return rows.controls.
      map((row)=> row.get('quantity').value * row.get('price').value). //calcualte each amount
       reduce((sum,amount) => sum + amount,0); //find sum
}

**Angular 6: Grand Total**       
 **<h2 align="center">Usage Details Of {{profile$.firstName}}</h2>
        <table align ="center">
          <tr>
            <th>Call Usage</th>
            <th>Data Usage</th>
            <th>SMS Usage</th>
            <th>Total Bill</th>
          </tr>
          <tr>
          <tr *ngFor="let user of bills$">
            <td>{{ user.callUsage}}</td>
            <td>{{ user.dataUsage }}</td>
            <td>{{ user.smsUsage }}</td>
       <td>{{user.callUsage *2 + user.dataUsage *1 + user.smsUsage *1}}</td>
          </tr>


          <tr>
            <th> </th>
            <th>Grand Total</th>
            <th></th>
            <td>{{total( bills$)}}</td>
          </tr>
        </table>**


    **Controller:**
        total(bills) {
            var total = 0;
            bills.forEach(element => {
total = total + (element.callUsage * 2 + element.dataUsage * 1 + element.smsUsage * 1);
            });
            return total;
        }