Angular 4，在表单数组中使用ngModel（ReactiveFormsModule）

Question

我尝试在角度4中使用简单的数组形式，而且我遇到了一个与ngModel有关的奇怪问题。

请先锁定我的密码。

我的方法

1. 定义表单FormGroup：

   public invoiceForm: FormGroup;
   

2. 设置我的测试数据和表单模型：

   readonly local = [
   'Lorem ipsum dolor sit amet',
   'et iusto odio dignissim qui blandit',
   'Epsum factorial non deposit',
   'Ma quande lingues coalesce'
   ];
   public localModel = this.local;
   

3. 在ngOnInit中定义表单组，然后将我的本地行添加到表单组中：

   this.invoiceForm = this._fb.group({
       itemRows: this._fb.array([this.initItemRows()])
   });
   
   
   for (let index in this.local)
       this.setAndReplaceNewERow(+index)
   

目前，一切看起来都是正确的。 see result as image

问题

当我更改其中一个文本输入时，主变量也会改变。

变更前：

FormGroup
{
  "itemRows": [
    {
      "itemname": "Lorem ipsum dolor sit amet"
    },
    {
      "itemname": "et iusto odio dignissim qui blandit"
    },
    {
      "itemname": "Epsum factorial non deposit"
    },
    {
      "itemname": "Ma quande lingues coalesce"
    }
  ]
}

My Local Data
[
  "Lorem ipsum dolor sit amet",
  "et iusto odio dignissim qui blandit",
  "Epsum factorial non deposit",
  "Ma quande lingues coalesce"
]

My Form Model
[
  "Lorem ipsum dolor sit amet",
  "et iusto odio dignissim qui blandit",
  "Epsum factorial non deposit",
  "Ma quande lingues coalesce"
]

更改后：

FormGroup
{
  "itemRows": [
    {
      "itemname": "Lorem ipsum dolor sit amet"
    },
    {
      "itemname": "et iusto odio dignissim qui blandit"
    },
    {
      "itemname": "changed !!!!!!!!!!!"
    },
    {
      "itemname": "Ma quande lingues coalesce"
    }
  ]
}
My Local Data
[
  "Lorem ipsum dolor sit amet",
  "et iusto odio dignissim qui blandit",
  "changed !!!!!!!!!!!",
  "Ma quande lingues coalesce"
]
My Form Model
[
  "Lorem ipsum dolor sit amet",
  "et iusto odio dignissim qui blandit",
  "changed !!!!!!!!!!!",
  "Ma quande lingues coalesce"
]

样本

请查看Plunk Demo

Answer 1

所以基本上你希望你的readonly local变量保持不变？

你只需要改变这个：

public localModel = this.local;

到此：

public localModel = Object.assign({}, this.local);

这里发生了什么：您的localModel获取与local变量相同的引用，然后影响它以模拟您的表单。因此，修改表单中的数据将修改引用，因此local变量值将发生变化。

我使用Object.assign()方法创建一个具有相同值的新引用。基本上，它是一份副本。

N.B：如果您使用数组，则会遇到相同的问题，因为数组引用将是相同的。因此，您可能需要执行所谓的深层复制来创建数组的新引用，以及其中的值的副本。