从行总计中获取总计

Question

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

html

<div class="card-block" formArrayName="rows">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Material SKU</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of myForm.controls.rows.controls; let i = index" [formGroupName]="i">
        <td>
          <select formControlName="material_id" class="col-md-10" required>
            <option *ngFor="let mat_order of mat_orders" [ngValue]="mat_order.material_id">
              {{ mat_order.mat_name }}
            </option>
          </select>
        </td>
        <td><input type="number" class="col-md-6" formControlName="quantity" required></td>
        <td><input type="number" class="col-md-6" formControlName="price" required></td>
        <td><input type="number" class="col-md-6" formControlName="total"  [ngModel] ="row.get('quantity').value * row.get('price').value" required></td>
        <td>
          <button type="button" class="btn btn-sm btn-danger" (click)="onDeleteRow(i)"><i class="fa fa-trash-o" aria-hidden="true"></i> Remove</button>
        </td>
      </tr>

    </tbody>
  </table>
  <div class="float-right">
    Grand Total:  <input type="number" class="col-md-5" formControlName="grand_total" required disabled>
  </div>
  <button type="button" class="btn btn-sm btn-primary float-left" (click)="initGroup()"><i class="fa fa-plus-circle" aria-hidden="true"></i>  Add Row</button>
</div>

ts

 constructor(private fb: FormBuilder) { 

    this.myForm = this.fb.group({
      rows: this.fb.array([])
    })

  }


initGroup() {
    let rows = this.myForm.get('rows') as FormArray;
    rows.push(this.fb.group({
      material_id: [''],
      quantity: [''],
      price: [''],
      total: ['']
    }))

  }

Answer 1

您可以在这里简单地使用数组map 和reduce。

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

在你的 ts 文件中：

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
}

Answer 2

在类似的组件中创建和运行

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()}}

Answer 3

**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;
        }