角度2の反応形式でフォーム配列（配列の配列に配列）を反復する方法は？

Question

は私が

これはhttps://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview

plunk https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview

は、私はこのような入れてほしい。この場合のplunkerリンクで、formArrayを数回繰り返し処理しようとしたこれは私のシナリオ

[ 

{ 
    "id": 1, 
    "legend": "businessModule", 
    "group": [ 

    { 
     "id": 1, 
     "permission": { 
     "controleType": "ff", 
     "id": 2, 
     "key": "create Business" 
     }, 
     "roles": [ 
     { 
      "id": 1, 
      "name": "self" 
     }, 
     { 
      "id": 2, 
      "name": "other" 
     } 
     ] 
    }, 


    { 
     "id": 1, 
     "permission": { 
     "controleType": "ff", 
     "id": 2, 
     "key": "edit business" 
     }, 
     "roles": [ 
     { 
      "id": 1, 
      "name": "self" 
     }, 
     { 
      "id": 2, 
      "name": "other" 
     } 
     ] 
    } 

    ] 
}, 


{ 
    "id": 2, 
    "legend": "PanicModule", 
    "group": [ 

    { 
     "id": 1, 
     "permission": { 
     "controleType": "ff", 
     "id": 2, 
     "key": "create panic" 
     }, 
     "roles": [ 
     { 
      "id": 1, 
      "name": "self" 
     }, 
     { 
      "id": 2, 
      "name": "other" 
     } 
     ] 
    }, 


    { 
     "id": 1, 
     "permission": { 
     "controleType": "ff", 
     "id": 2, 
     "key": "edit panic" 
     }, 
     "roles": [ 
     { 
      "id": 1, 
      "name": "self" 
     }, 
     { 
      "id": 2, 
      "name": "other" 
     } 
     ] 
    } 

    ] 
} 

]; 

のためにあります上記の配列私は反応的なフォームを構築しようとしたが、の許可、ロールの配列のチェックボックスが必要の下にグループ

は、だから、私はHTMLが

<form [formGroup]="roleForm" (submit)="submit(roleForm.value)"> 
    <h3>Add trust</h3> 

    <div class="form-group"> 
     <label>Name</label> 
     <input type="text" class="form-control" formControlName="roleName"> 
    </div> 

    <div class="form-group"> 
     <label>roleDescription</label> 
     <input type="text" class="form-control" formControlName="roleDescription"> 
    </div> 
    <div class="form-group"> 
     <label>permission roles</label> 
     <div formArrayName="permissionModules"> 
      <div *ngFor="let contract of roleForm.controls.permissionModules.controls; 
      let i=index" class="panel panel-default"> 
      <div [formGroupName]="i"> 
       {{contract.value.legend}} 
      <!-- <input type = "checkbox" formControlName="legend"> 
       {{contract.value.legend}}--> 



      </div> 


      </div> 
     </div> 

    </div> 
    <button type="submit">Submit</button> 

</form> 

似ているこの

component.ts

validateForm() { 
    this.roleForm = this.fb.group({ 
    roleName: ['', Validators.required], 
    roleDescription: ['', Validators.required], 
    permissionModules: this.fb.array([]) 
    }); 
    this.initModule() 
} 

initModule（）{

const contractArray = <FormArray>this.roleForm.controls['permissionModules']; 
    console.log(contractArray, 'contractArray') 
    this.form_objects.forEach(element => { 
     this.newElement = element; 
     console.log(this.newElement, 'this.newElement') 
    // element.forEach(group => { 

      contractArray.push(this.fb.group({ 
      id: [''], 
      legend:this.newElement.legend, 
      group: this.fb.array([ ]) 
     })); 
    // } 
    this.initGroup(element, contractArray) 
    } 
} 



initGroup (element, contractArray) { 
    console.log(element, '@@@@@@@@@@@@@@@@@@@@@@',contractArray) 
    // const groupArray = <FormArray>contractArray.controls['group']; 
    this.groupArray = <FormArray>this.roleForm.controls.permissionModules.controls[1]; 

    console.log(this.groupArray, 'groupArray&&&&&&&') 
     element.group.forEach(group => { 
     this.newGroup = group; 
     console.log(this.newGroup, 'this.newGroup') 
     /* if(typeof (this.groupArray) !== 'undefined') { 
      this.groupArray.push(this.fb.group({ 
       id: [''], 
       legend:this.newGroup.legend 

     })); 
     }*/ 

     } 
     } 

submit(value) { 
    this.result = value 
} 

ような配列を反復することを試みました

私は上のケースで2番目のレベルの配列を反復することができません initGroup（）関数groupArrayの下で私は間違いを知りませんでした。 angular2は、だから、いずれかが私に事前

Answer 1

で 感謝を助けてください、私は私ができる反復ネストされた配列、

これを午前<FormArray>this.roleForm.controls['permissionModules']).at(k).get('group') as FormArray

synataxを使用して私の問題

を解決しましたあなたは私のアプローチを見ることができますplunkリンク http://plnkr.co/edit/AVqWKkUCNc1HjosOpUWf?p=preview