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

Question

我正在尝试在angular 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" 
] 

DEMO

请看看Plunk Demo

Answer 1

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

你只需要更改此设置：

public localModel = this.local; 

这样：

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

---

这里发生了什么：您localModel得到相同的参考为您local变量，然后影响这个建模到你的表单。因此，修改表格中的数据将修改参考值，因此您的变量值将会改变。

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

N.B：如果使用数组，则会出现相同的问题，因为数组引用将相同。因此，您可能需要执行称为深层副本的创建数组的新引用以及其中的值的副本。