Reactive Forms (FormArray)에 중첩 된 배열을 포함하는 데이터 검색

Question

중첩 된 배열로 데이터를 검색하는 중 문제가 발생했습니다 (내 두 번째 수준 배열의 데이터가 중복 됨). 문제는 내가 데이터를 반복하고있는 것처럼 보이지만 문제를 해결하기 위해 무엇을해야할지 모르겠습니다. 명확히하기 위해 아래에 예제가 있습니다 (문제는 array2 속성과 함께 나타납니다).

{{nestedForm.value | json}}

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

} 

:

원본 데이터 개체 아래

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 }); 

입니다

보시다시피. 태그 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 
});