这是这个案例https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview的plunker链接

我想要像这样插入https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview

这是我的情景

[

{
  "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,"key": "edit business"
      },"name": "other"
        }
      ]
    }

  ]
},{
  "id": 2,"legend": "PanicModule","key": "create panic"
      },"key": "edit panic"
      },"name": "other"
        }
      ]
    }

  ]
}

];

对于上面的数组我尝试构建反应式表单,我需要复选框的权限,组下的角色数组

所以我试着像这样迭代数组

component.ts

validateForm() {
  this.roleForm = this.fb.group({
  roleName: ['',Validators.required],roleDescription: ['',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
}

我的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>

但我无法在上面的情况下迭代二级数组
在initGroup()函数groupArray下,我不知道我的错误是什么,我搜索了许多网站都只告诉了一个级别的迭代,我是angular2的新手,所以请任何人帮助我
提前致谢