Angular 使用输入行将ngModel绑定到网格中的第二级ngFor，角度2

我需要帮助，几天来我一直在尝试用对象创建一个网格，然后插入到数组中。网格中的每一行都表示具有“选择”下拉列表和带有输入框的列列表的对象。我的问题是，当我更改代表输入框的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>

---

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

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

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

您正在设置相同的数组

标题列表

（和使用不同的

可用颜色

，因此数组是否相同并不重要）

使用相同的数组意味着两个对象的数组当然是相同的。因此，无论对一个数组执行什么操作，都会对另一个数组执行

您需要做的是对该阵列进行深度克隆。浅层复制不起作用，因为它仍然保留对象引用，我们也需要去掉它。深度克隆有一些可能的解决方案，例如使用库。但是，我们也可以通过将现有数组映射到新数组并使用

对象来完成此操作

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)

如果您想查看它们，这里还有其他解决方案：我个人喜欢我向您展示的上述方法，特别是因为您希望将数据强制转换到类
RefQuantities

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

这是您的plunker:
请创建一个plunker来说明问题：）@AJT_82我无法创建一个运行的plunker，这就是为什么我添加了pngIt，只是因为当前代码无法按原样调试，所以很难提供帮助：（这也很好地解释了这个问题缺乏答案的原因。希望您能得到一些答案：）@AJT_82 tkx。我会试着找一份工作plunker@AJT_82我添加了一个工作抢掠。。。是否有理由使用Angular的beta版本？？我建议你至少更新到Angular 2 final，因为测试版是。。。测试版：D，但这只是一个建议，如果你有可能升级它：）这只是一个测试，事实上我使用的是一个最终版本，非常好，tkx很多@AJT-，很高兴听到它工作了！）周末愉快，编码愉快！
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)