リアクティブフォーム（FormArray）でネストされた配列を含むデータを取得する

Question

ネストされた配列を持つデータを取得してそれを私のリアクティブフォーム（2番目のレベルの配列のデータが複製されます）に表示するのに問題があります。問題は私がデータをループしているようだが、私はそれを修正するために何をすべきか分からない。明確にするために、私は以下の例を持っています（問題はarray2プロパティで現れます）。

オリジナルデータを以下

nestedData = { 
nestOne: "Level One", 
array1: [ 
    { 
    nestTwo: "A", 
    array2: ["Tag A"] 
    }, 
    { 
    nestTwo: "B", 
    array2: ["Tag B"] 
    } 
]}; 

オブジェクトを見たときに、反応性コード

nestedForm: FormGroup; 
let array_one = new FormArray([]); 
let array_two = new FormArray([]); 
// If an If block to check if 'array1' property is present; 
if (this.nestedData['array1']) { 
    for (let ar1 of this.nestedData.array1) { 
    // IF BLOCK FOR array2 
     if (ar1['array2']) { 
     // For loop to get array2 data 
      for (let ar2 of ar1.array2) { 

       array_two.push(
        new FormControl(ar2, Validators.required), 
       ) 

      } 
     } //IF Block Ends 

     array_one.push(
      new FormGroup({ 
       'nestTwo': new FormControl(ar1.nestTwo), 
       'array2': array_two 
      }) 
     ); 
    } 
} 

this.nestedForm = this.fb.group({ 
    'nestedOne': [this.nestedData.nestOne], 
    'array1': array_one 
}); 

は今、これが結果です：

{{nestedForm.value | json}}

{ 
    "nestedOne": "Level One", 
    "array1": [ 
     { 
      "nestTwo": "A", 
      "array2": [ 
       "Tag A", 
       "Tag B" 
      ] 
     }, 
     { 
      "nestTwo": "B", 
      "array2": [ 
       "Tag A", 
       "Tag B" 
      ] 
     } 

} 

ご覧のとおりです。タグAとタグBは、両方のarray2プロパティに表示されないときに表示されます。私は配列2のデータを取得し、それをReactive FormArrayにプッシュし、親配列1内に保持しておく最良の方法を知らない。

Answer 1

の内部のループをの直前に初期化します（の場合）。そうすることで、array2の値を同じ形式にプッシュしないようにします。

nestedForm: FormGroup; 
let array_one = new FormArray([]); 
// If an If block to check if 'array1' property is present; 
if (this.nestedData['array1']) { 
    for (let ar1 of this.nestedData.array1) { 
    let array_two = new FormArray([]); // initialize here 
    // IF BLOCK FOR array2 
     if (ar1['array2']) { 
     // For loop to get array2 data 
     for (let ar2 of ar1.array2) { 
      array_two.push(new FormControl(ar2, Validators.required)); 
     } 
    } //IF Block Ends 

    array_one.push(
     new FormGroup({ 
      'nestTwo': new FormControl(ar1.nestTwo), 
      'array2': array_two // but if the data is not available, you will be pushing empty form array here 
     }) 
    ); 
    } 
} 

this.nestedForm = this.fb.group({ 
    'nestedOne': [this.nestedData.nestOne], 
    'array1': array_one 
});