將對象推入Angular中的數組

Question

我有將對象推入數組的問題。 我內部有對象數組。 該組件將其打印出來：

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

其次，將對象添加到數組中，但是我可以添加各種類型的對象，例如：大米，雞肉等。 所以我創建了另一個數組，里面有對象。 該數組不包含任何內容，因為用戶可以檢查自己的值。 因此，在第二部分中，我打印產品名稱並輸入本地參考

<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個元素我要權重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);
}