Question

我需要帮助，我已经尝试过几天来创建一个带有对象的网格，然后插入到一个数组中。网格中的每一行代表具有选择下拉列表的对象和带有输入框的colomns列表。我的问题是，当我更改表示我的输入框的headItem值时，该值将通过（ onRowClick（））保存到数组中的所有对象。我想知道是否可以在行上设置ngModel以仅更新该行的值。

注意：DOM对象显示正确，因为我索引了headItem值 headItem.value [childIndex]

<tr *ngFor='#row of listRows; #parentIndex = index'>
        <td>
            <select
                [(ngModel)]="color[parentIndex]"
                (ngModelChange)="sendColorEvent($event, row)"
                class="form-control">
                <option *ngFor='#obj of row.availableColors'>{{obj}}</option>
            </select>
        </td>
        <td *ngFor='#headItem of row.headList; #childIndex = index'>
          <input [(ngModel)]="headItem.value[childIndex]" (ngModelChange)="onRowClick($event, row, headItem)" type="number">
        <td>
          <input readonly="readonly" [(ngModel)]="totalAmount" type="number">
        </td>
    </tr>

在控制台日志中，您可以看到数组中的所有行都具有相同的值，最后一次输入。

  onRowClick(quantity, row, headItem) {
  headItem.value = quantity;
  console.log(this.listRows)
  this.getTotal();
 }

PLunker grid

Answer 1

您面临的问题是，在您的代码中，当您创建对象的两个实例时：

const gblRowVal1 = 
     new GridRowValues(1, this.color, this.headList, this.availableColors)

const gblRowVal2 = 
     new GridRowValues(2, this.color, this.headList, this.availableColors)

您正在设置相同的数组headList（以及您使用的availableColors，因此数组相同并不重要）。

使用相同的数组意味着数组当然对两个对象都相同。所以无论你对一个阵列做什么，都会发生在另一个阵列上。

您需要做的是对该数组进行深度克隆。浅拷贝不起作用，因为它仍然保留对象引用，我们也需要摆脱它。对于深度克隆，有一些可能的解决方案，例如使用 lodash 库。但是我们也可以通过将现有数组映射到新数组并使用Object.assign来实现它：

const gblRowVal1 = new GridRowValues(1, this.color, 
   this.headList.map(x => Object.assign(new RefQuantities(), x )),
   this.availableColors)

const gblRowVal2 = new GridRowValues(2, this.color, 
   this.headList.map(x => Object.assign(new RefQuantities(), x )), 
   this.availableColors)

如果您想查看它们，还有其他解决方案：How do you clone an Array of Objects in Javascript?我个人喜欢上面介绍的方法，特别是因为您希望将数据转换为类RefQuantities。< / p>

现在这些数组是不同的数组，其中任何一个中的更改都不会影响另一个数组。

这是你的傻瓜：https://plnkr.co/edit/HozFyjGvwL6mgmclliiW?p=preview

将ngModel绑定到带有输入行的网格中的第二级ngFor，Angular 2

1 个答案: