javascript数组对象覆盖以前的对象，即使我正在创建新的引用

Question

我有 c# c++ 背景，我对正在发生的事情感到困惑。

在我的函数范围内，我在将它插入“数组”之前创建了一个新对象。当我创建新对象时，它似乎引用了之前添加到数组中的同一个对象，即使我没有分配给同一个变量。这很令人困惑，因为在 c# 中，这段代码将创建一个新对象，然后将新对象添加到数组中。我如何在 javascript 中解决这个问题？即使使用我认为应该保留在我定义的范围内的 'let'，似乎也不起作用

功能:

  addPurchaseOrderItem() {
    this.purchaseOrderItems.push(new PurchaseOrder("","","","",1,100,""));
    console.log(this.purchaseOrderItems);
    // this.showNewPurchaseOrderItem = true;
  }

另一个仍然不起作用的版本:

 addPurchaseOrderItem() {
    let temp = new PurchaseOrder("","","","",1,100,"");
    this.purchaseOrderItems.push(temp);
    console.log(this.purchaseOrderItems);
    // this.showNewPurchaseOrderItem = true;
  }

采购订单类:

export class PurchaseOrder {
    public poNumber: string;
    public siteLocation: string;
    public lineItem: string;
    public manufacture: string;
    public partNum: string;
    public qTY: number;
    public acquisitionCost: number;
    public itemDescription: string

    constructor(
        siteLocation: string,
        lineItem: string,
        manufacture: string,
        partNum: string,
        qTY: number,
        acquisitionCost: number,
        itemDescription: string
        )
    {
        this.siteLocation = siteLocation;
        this.lineItem = lineItem;
        this.manufacture = manufacture;
        this.partNum = partNum;
        this.qTY = qTY;
        this.acquisitionCost = acquisitionCost;
        this.itemDescription = itemDescription
    }
}

这是现场示例 (stackblitz): https://stackblitz.com/edit/angular-rvkjoa

Answer 1

您的数组已正确填充。看起来你有相同的 id's 并且 Angular 始终在任何地方显示第一行。您的数组项不一样。从下面的代码可以看出:

<!-- The above code omitted for the brevity -->
<button (click)="addPurchaseOrderItem()"> Add</button>
<p>purchaseOrderItems {{ purchaseOrderItems | json }} </p>

你应该只删除 id 属性，因为它们在你的循环中总是相同的:

<form #form="ngForm" (ngSubmit)="saveAllChangesToDatabase(form)">
    <table style="width:100%; margin: 0 auto;">
    <tr style="text-align: left;">
      <th>QTY</th>
      <th>Acq. Cost$</th>
      <th>Item Description</th>
    </tr>
    <tr *ngFor="let purchaseOrder of purchaseOrderItems">
      <td>
        <input name="qTY" [(ngModel)]="purchaseOrder.qTY" type="text" size="3%"  required>
      </td>
      <td>
        <input name="acquisitionCost" [(ngModel)]="purchaseOrder.acquisitionCost" type="text" size="5%"  required>
      </td>
      <td>
        <input name="itemDescription" [(ngModel)]="purchaseOrder.itemDescription" type="text" size="35%" required>
      </td>
    </tr>
  </table>
  <button style="margin-top: 2em"style="height: 2em; width: 100%; margin-top: .5em" (click)="addPurchaseOrderItem()"> Add</button>

  <p>purchaseOrderItems {{ purchaseOrderItems | json }} </p>

</form>

更新:

只需删除 form 标签即可避免数据丢失

<table style="width:100%; margin: 0 auto;">
    <tr style="text-align: left;">
      <th>QTY</th>
      <th>Acq. Cost$</th>
      <th>Item Description</th>
    </tr>
    <tr *ngFor="let purchaseOrder of purchaseOrderItems">
      <td>
        <input name="qTY" [(ngModel)]="purchaseOrder.qTY" type="text" size="3%"  required>
      </td>
      <td>
        <input name="acquisitionCost" [(ngModel)]="purchaseOrder.acquisitionCost" type="text" size="5%"  required>
      </td>
      <td>
        <input name="itemDescription" [(ngModel)]="purchaseOrder.itemDescription" type="text" size="35%" required>
      </td>
    </tr>
  </table>
  <button style="margin-top: 2em"style="height: 2em; width: 100%; margin-top: .5em" (click)="addPurchaseOrderItem()"> Add</button>

  <p>purchaseOrderItems {{ purchaseOrderItems | json }} </p>