从总行数中获取总计-Java 学习之路

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

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: ['']
    }))

  }

3 回答

你可以在这里使用 Array 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
}

回复于 2024-04-27T09:20:34+08:00

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

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

回复于 2024-04-27T09:20:34+08:00

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

回复于 2024-04-27T09:20:34+08:00

从总行数中获取总计

3 回答

相关问题