Question

我有将对象推入数组的问题。我有内部对象的数组。该组件打印出来：

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

第二个添加对象到数组，但我有可能添加各种类型的对象，如：米饭，鸡肉等。所以我在内部创建了带对象的其他数组。这个数组不包含wieght因为用户可以检查自己的价值。因此，在第二个组件中，我打印产品名称并输入本地参考

<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);
  }

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

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);
}

在Angular中将对象推入数组

1 个答案: