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>

Answer 2

Javascript具有通过引用传递的3种数据类型：数组，函数和对象。其他一切都是通过价值传递。解决方案可以在以下帖子中找到。 JavaScript: How to pass object by value?

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

2 个答案: