Angular 9 обновление объекта в массиве объектов - PullRequest
Новая
       0

Angular 9 обновление объекта в массиве объектов

0 голосов
/ 12 апреля 2020

Как видно из названия, мне нужно обновить одно значение в массиве. 

<div *ngFor="let item of data; let i = index" >
  <div class="full-w" fxLayout='row' fxLayoutAlign='start center' fxLayoutGap='12px'>
    <span class="title">Color: </span>
    <span>{{item.color}}</span>
  </div>
  <mat-divider class="full-w"> </mat-divider>

  <div *ngFor="let e of item.sizeQuantity; let j = index" fxLayout='row' fxLayoutAlign='space-between center'
    fxLayoutGap='12px'>
    <span class="title">Size: </span>
    <span class="size">{{e.size}}</span>
    <mat-form-field>
      <input matInput type="number" placeholder="Quantity" [value]="e.quantity" #quantity />
    </mat-form-field>

    <button mat-button (click)="updateQuantity(quantity.value, item, i, j)">Add</button>
  </div>
</div>

и это начальные данные

enter image description here

, и когда я ввожу данные в одно поле, например, под черным> xs, он меняется также на бежевый> xs (если есть синий> xs или больше, он обновляется)

enter image description here

enter image description here

Я пробовал несколько подходов, но он продолжает обновлять значения в каждой позиции 

  updateQuantity(value, item, ind, j) {

    this.data.forEach(e => {
      if (e.color == item.color) {
        e.sizeQuantity[j].quantity = parseInt(value);
      }
    })
  }

Или вот так 

  updateQuantity(value, item, ind, j) {
    this.data.find(e => e.color == item.color).sizeQuantity[j].quantity = parseInt(value); 

  }

Я что-то упустил?

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

Данные создаются следующим образом: 

       let quantity = [];
        let sizeQuantity = [];

        this.selectedSizes.forEach(e => {
          sizeQuantity.push({ size: e, quantity: 0 })
        })

        this.selectedColors.forEach(e => {
          quantity.push({ color: e, sizeQuantity })

        })

        this.dialog.open(AddQuantityComponent, {
          data: quantity
        })

, где массивы размеров и цветов создаются динамически на основе выбора пользователя: 

this.selectedColors  = ['black', 'beige', 'blue'];
this.selectedSizes = ['XS', 'S'];

1 Ответ

1 голос
/ 12 апреля 2020

Значения quantity обновляются в каждом цвете, поскольку они совместно используют один и тот же экземпляр sizeQuantity. Корни проблемы в этом методе 

this.selectedColors.forEach(e => {
  quantity.push({ color: e, sizeQuantity })
})

Здесь необходимо создать глубокую копию из sizeQuantity, это означает, что можно использовать следующее: 

this.selectedColors.forEach(e => {
  let sq = JSON.parse(JSON.stringify(sizeQuantity));
  quantity.push({ color: e, sizeQuantity: sq });
});

Хитро, что JSON serialize / deserialize используется для создания глубокой копии, но это самый простой и наиболее обратно совместимый метод. Для получения дополнительной информации о создании глубокой копии ознакомьтесь с этим диалогом стекопотока .

...