массив объектов не сохраняющий значение при обновлении поля объекта в angular

Question

массив объектов - это массив форм, т.е. products: formBuilder.array ([]) Я пытаюсь обновить объект. Существует несколько продуктов, и пользователь может обновить количество. Например:

product1.quantity :2
product2.quantity :5

, когда пользователь нажимает кнопку обновления количества продукта для первого продукта, количество меняется на 3, но когда пользователь пытается обновить продукт2. количество продукта2 обновляется до 6, но количество продукта1 изменяется на 2.

ОБНОВЛЕНИЕ КОЛИЧЕСТВА ПРОДУКТА1:

product1.quantity:3
product2.quantity:5

ОБНОВЛЕНИЕ КОЛИЧЕСТВА ПРОДУКТА2:

product1.quantity:2
product2.quantity:6

Я не могу понять это поведение. Вот фрагмент кода для вашей справки: .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

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

РЕДАКТИРОВАТЬ:

 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.

Когда я использую оператор распространения, количество даже не обновляется в первый раз.

Answer 1

Вы можете создать временный массив и обновить значения в этом массиве, а затем вызвать функцию setValue

let tempArr = productsInvoice
loop through tempArr to update your value
productsInvoice.setValue(tempArr)

Answer 2

используйте 2-стороннее связывание, поэтому измените value={{product_details_tax.value?.quantity}} на [(value)]="product_details_tax.value?.quantity"

, поэтому вам не нужно вручную изменять значение, так как пользователь меняет входное значение, которое должна изменить модель.

см. Объяснение: https://www.javatpoint.com/two-way-data-binding-in-angular-8

Answer 3

Попробуйте использовать оператор распространения для обновления объекта продукта.

   this.productsinvoice.value.forEach(productInvoice => {
      if(productInvoice.productID === this.productID){
         productInvoice = {
             ...productInvoice,
             quantity: this.product_quantity
         }
      }   
    });