无法访问插值 {{}} 设置的输入字段值

Question

我正在开发一个非常简单的应用程序，它包含一个带有 formArray 的表单。 在 formArray 中可以选择产品名称和数量。当两者都被选中时，第三个输入字段 - total - 使用

计算物品的总价格（产品价格 * 数量）

<input matInput placeholder="total"
  type="number"
  formControlName="total"
  value="{{getProductPrice(purchaseForm.value.product[i].productId) * purchaseForm.value.product[i].amount}}">

我想对 formArray 中所有项目的 total 输入字段（价格）求和。该值显示为 OK，如果我更改任何产品和/或金额，它会自动更改。

我的问题是，当我尝试访问 total 输入字段的值时，我得到 0。如果我手动更改值（粘贴、键入等），我可以正确访问它离开。

我可以访问其他字段（fex。我可以计算所有产品的总和）

是不是我设置字段值的方式导致的问题？

有人知道这是为什么吗？

Answer 1

//create an array of totals
totals:number[]=[];
total:number; //<--use a variable to store the total

//After create the form Array
this.yourFormArray.valueChanges(res=>{
   let total=0;
   res.forEach((x:any,index:number)=>{
     //use the "+" to convert to number res.amount;
     totals[index]=(+x.amount)*(this.getProductPrice(x.productId));
     total+=totals[index]
   })
   this.total=total;
}

Answer 2

当您使用value 时，您将绑定到一个名为value 的HTML 属性，该属性将更新DOM，但永远不会更新表单的值。要更新您的表单值，您可以将ngModel 与这样的反应式表单结合使用，但我不建议这样做：

<input matInput placeholder="total"
  type="number"
  formControlName="total"
  [ngModel]="getProductPrice(purchaseForm.value.product[i].productId) * purchaseForm.value.product[i].amount">

您不应该从不在这样的视图中设置值。但是，该代码将起作用。一个更正确的做事方式可能是观察表单中的值变化并根据新值设置总计。类似这样的东西：

ngOnInit() {
  // Watch our form and set value of total based on qty and price.
  // NOTE: In real life be sure to unsubscribe from this subscription when component is destroyed.
  // You ALSO probably only want to respond to certain value changes here.
  this.form.valueChanges.subscribe(formValues => {
    if (someValueIndicatingWeNeedToUpdateTotal === true) {
      this.form.get('total').setValue(1 * 2); // Obviously replace this with real logic
    }
  })
}

不管怎样，我已经创建了一个working example you can play around with on StackBlitz。