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

从总行数中获取总计

3 个答案: