[英]array of Objects not retaining value when I update a field of the object it in angular
array of objects is a form array ie products:formBuilder.array([]) I am trying to update an object .对象数组是一个表单数组,即products:formBuilder.array([])我正在尝试更新一个对象。 There are multiple products and the user has an option to update quantities.
有多种产品,用户可以选择更新数量。 For example:
例如:
product1.quantity :2
product2.quantity :5
when the user clicks on update product quantity button for the first product , the quantity changes to 3, but when user tries to update the product2.当用户单击第一个产品的更新产品数量按钮时,数量变为 3,但当用户尝试更新产品 2 时。 the quantity of product2 gets updated to 6 , but the quantity of product1 changes back to 2.
product2 的数量更新为 6 ,但 product1 的数量变回 2 。
UPDATE QUANTITY PRODUCT1:更新数量产品1:
product1.quantity:3
product2.quantity:5
UPDATE QUANTITY PRODUCT2:更新数量产品2:
product1.quantity:2
product2.quantity:6
I am unable to understand this behaviour.我无法理解这种行为。 Here is the code snippet for your reference: .ts file code (function called on button click)
以下是供您参考的代码片段: .ts 文件代码(单击按钮时调用的函数)
console.log(JSON.parse(JSON.stringify(this.productsinvoice.value)));
this.productsinvoice.value.forEach(productInvoice => {
if(productInvoice.productID === this.productID){
productInvoice.quantity = this.product_quantity;
}
});
console.log(JSON.parse(JSON.stringify(this.productsinvoice.value)));
HTML code HTML代码
<div *ngFor="let product_details_tax of newrequest?.get('productsinvoice')['controls']; let i=index"
[formGroupName]="i">
<div class="row">
<div class="form-group col formgroup_mar_bottom">
<label for="inputRate4">Product Name</label>
<input type="text" class="form-control" id="inputRate4"
formControlName='productname' placeholder="Enter Product Name">
</div>
<div class="form-group col formgroup_mar_bottom">
<label for="inputAmount">Quantity</label>
<input type="number" class="form-control" id="inputAmount4"
formControlName='quantity'
value={{product_details_tax.value?.quantity}}
placeholder="Enter Quantity">
</div>
EDIT:编辑:
this.productsinvoice.value = this.productsinvoice.value.map(productInvoice => {
if(productInvoice.productID === this.productID){
console.log(this.product_quantity);// prints the new quantity
return {
...productInvoice,
quantity: this.product_quantity
}
console.log(productInvoice)// logs new value of quantity
}else{
return productInvoice
}
});
console.log(this.productsinvoice.value);//logs the object with old quantity.
When I use the spread operator, the quantity doesn't even get updated for the first time.当我使用传播运算符时,数量甚至没有第一次更新。
You can create a temp array and update values in that array and then call the setValue function您可以创建一个临时数组并更新该数组中的值,然后调用 setValue 函数
let tempArr = productsInvoice
loop through tempArr to update your value
productsInvoice.setValue(tempArr)
Try using spread operator to update product object.尝试使用扩展运算符来更新产品对象。
this.productsinvoice.value.forEach(productInvoice => {
if(productInvoice.productID === this.productID){
productInvoice = {
...productInvoice,
quantity: this.product_quantity
}
}
});
use 2 way binding, so change value={{product_details_tax.value?.quantity}}
to [(value)]="product_details_tax.value?.quantity"
使用 2 路绑定,因此将
value={{product_details_tax.value?.quantity}}
更改为[(value)]="product_details_tax.value?.quantity"
this way you do not need to manually change the value, as the user changes the input value the model should change.这样您就不需要手动更改值,因为用户更改了模型应该更改的输入值。
see explanation: https://www.javatpoint.com/two-way-data-binding-in-angular-8见解释: https : //www.javatpoint.com/two-way-data-binding-in-angular-8
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.