角度4、フォームアレイ（ReactiveFormsModule）でngModelを使用

Question

角度4で単純な配列形式を使用しようとしていましたが、ngModelで奇妙な問題が発生しました。

私のコードを最初にロックしてください。

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; 

がngOnInitでシンプルなアドオンでフォームグループを定義します。私のテストデータとフォームのモデル設定

public invoiceForm: FormGroup; 

：私のフォームFormGroupの定義

私の方法

1. フォームグループに私の地元の行：

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

今のところ、すべてが正しいようです。 see result as image

問題

私は、テキストの入力のうちの1つを変更すると、メイン変数も変更されます。変更前

：変更後

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

だから、基本的に、あなたのreadonly local変数は同じままにしたいPlunk Demo

Answer 1

をご覧ください？これに

public localModel = this.local; 

：

は、あなただけのこれを変更する必要が

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

---

はここで何が起こっている：あなたlocalModelは、あなたのlocal変数と同一の参照を取得し、あなたのフォームにモデル化するためにこれに影響を与えます。したがって、フォーム内のデータを変更すると参照が変更され、localの変数値が変更されます。

Object.assign()メソッドを使用して、同じ値を持つ新しい参照を作成します。基本的にはコピーです。

N.B：アレイを使用する場合は、アレイの参照が同じになるため、同じ問題が発生します。したがって、ディープコピーという名前の配列の新しい参照とその中の値のコピーを作成する必要があるかもしれません。