Angular 角速度下反应形式的变化值

我有一个包含表单的循环表行。我想根据被动形式的价格和数量更新total字段。代码是

<tbody formArrayName="products">
    <tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i">
      <th scope="row">{{i+1}}</th>
      <td><input type="text" class="form-control" placeholder="Product Code" formControlName="product_code"></td>
      <td><input type="text" class="form-control" placeholder="Product Name" formControlName="product_name"></td>
      <td><input type="number" class="form-control" placeholder="Price" formControlName="product_price"></td>
      <td><input type="number" class="form-control" placeholder="Quantity" formControlName="product_quantity"></td>
      <td><input type="number" class="form-control"  formControlName="total" disabled></td>
      <td><button type="button" class="btn btn-danger ml-2" (click)="deleteProduct(i)">Remove</button></td>
    </tr>
  </tbody>

---

您可以考虑使用模板变量，如

<td><input type="number" class="form-control" placeholder="Price" formControlName="product_price" #price></td>
<td><input type="number" class="form-control" placeholder="Quantity" formControlName="product_quantity" #quantity></td>
<td><input type="number" class="form-control"  [value]="(price.value || 0) * (quantity.value || 0)" disabled></td>

模板

 <span>{{getProductsTotalPrice}}</span>

{{getProductsTotalPrice}

您可以在价格和数量输入上绑定更改事件并计算总价。您能告诉我如何获取每个表单数组条目的总价吗？i、 e.如何获得所有行的总数？@SurendraSinghChhabra为了获得所有控制器的总数，您必须循环抛出所有cotrollers并计算总数，但由于我使用formarray，因此没有关联的控制器名称？那么如何循环？@SurendraSinghChhabra与此类似

productForms.controls

如果我不明白我的意思，我可以将此解决方案添加到我的答案中@Surendrasinghchabra

getProductsTotalPrice() : number { 
   let total = 0;
   for(let product of  productForms.controls){
     total += (+product.get('price').value || 0) * (+product.get('quantity').value || 0)
   }
    return total;
  }

 <span>{{getProductsTotalPrice}}</span>