javascript - 在 Angular 中将对象插入数组

Question

我在将对象插入数组时遇到问题。我有里面有对象的数组。该组件打印它:

<div class="row"
  *ngFor="let element of dietList">
{{element.name}} {{ element.weight }}
</div>

第二次将对象添加到数组中，但我可以添加各种类型的对象，例如:大米、鸡肉等。所以我创建了其他带有对象的数组。该数组不包含 wiight，因为用户可以检查自己的值。因此，在第二个组件中，我打印产品名称并使用本地引用输入

<div *ngFor="let product of products">
  {{ product.name }}<input type="text" #weight>
  <button class="btn btn-primary" (click) = "onAddNewElement(product, weight.value)">Add</button>
</div>

onAddNewElement()方法非常简单:

  onAddNewElement(element, weight){
    let newElement = element;
    newElement.weight = weight;
    this.dietService.newElement(newElement);
  }

newElement() 方法将对象插入数组。

  newElement(element){
    PRODUCTS.push(element);
  }

它有效，但不是我想要的。当我添加第一个元素时，一切正常，但是当我添加下一个元素时，第一个元素的值将被覆盖。示例:在第一步中，我检查了 120 克的重量输入(例如鸡肉)。第二步，我检查了 200 克的重量。在结果中，我将 2 个元素的重量值设为 200 克。每次第一个值都会被覆盖。

Answer 1

所以这就是我认为正在发生的事情。

您有一系列产品，可以说:

var products = [{name: 'myOnlyProduct', weight: 120}]

现在您将循环访问 *ngFor 中的产品数组。您更改 html 中该对象的权重并将其传递给 onAddNewElement。在 onAddNewElement 中，您使用新权重更新旧对象并将其传递给 newElement。newElement 再次将完全相同的对象推送到数组中。

您需要做的是在更改权重之前创建一个新对象，然后将其推送到数组。

onAddNewElement(element, weight){
  let newElement = Object.assign({}, element); // make a copy
  newElement.weight = weight;
  this.dietService.newElement(newElement);
}