Angular 角度反应形式，填充嵌套形式阵列

我有一个具有结构的JSON对象

{
  "activityField": "string",
  "addresses": [
    {
      "postalCode": 0,
      "reference": "string",
      "region": "string",
      "street": "string",
      "type": "string"
    }
  ],
  "code": "string",
  "description": "string",
  "domainName": "string",
  "groups": [
    {
      "defaultGroup": true,
      "name": "string",
      "prestationNames": [
        "string"
      ]

    }
  ],
  "name": "string",
  "principalAddress": {
    "postalCode": 0,
    "region": "string",
    "street": "string",
    "type": "string"
  }

}

除了组数组中的嵌套数组prestationsNames之外，其他一切都正常工作， 每个组数组都有一个需要从后端填充的PrestationName数组

我的问题是如何从prestationNames填充数组？ 如何在html中正确绑定它？ 如何获取数据的值并将其显示在复选框标签中，以及何时单击值应插入非true或false

我试着对数据列表进行硬编码，结果成功了，但这不是我需要的

我迷路了，有人能帮我吗

.ts文件：

export class AddSocieteComponent implements OnInit {
  addSocieteForm: FormGroup;
  arrayOfadresses: { street: String; postalCode: String; region: String }[];
  numberOfAdresses: number = 0;
  listOfPrestation = [];

//hardcoded for now
  prestations = [
    { id: 1, name: "plomberie" },
    { id: 2, name: "chaud-froid" },
    { id: 3, name: "electricité" }
  ];

  constructor(
    private formBuilder: FormBuilder,
    private societeServ: SocieteService,
    private serviceServ: ServiceService
  ) {}

  ngOnInit() {
    //get list of prestation when component is intialized
    this.serviceServ.getAllCatgories().subscribe(data => {
      this.listOfPrestation = data;
      console.log(this.listOfPrestation);
    });

    this.initForm();
    console.log(this.groups);
    console.log("pres", this.groupsControls[0].get("prestationNames"));
  }

  initForm() {
    //create controls for chekboxes
    let chekControls = this.prestations.map(element => {
      return this.formBuilder.control(element.name);
    });
    console.log("check", chekControls);
    this.addSocieteForm = this.formBuilder.group({
      name: ["", [Validators.required]],
      code: ["", [Validators.required, codeSocieteValidator]],
      activityField: ["", [Validators.required]],
      description: ["", [Validators.required]],
      domainName: ["", [Validators.required]],
      addresses: this.formBuilder.array([]),
      groups: this.formBuilder.array([
        this.formBuilder.group({
          name: ["", [Validators.required]],
          defaultGroup: [false, []],
          prestationNames: this.formBuilder.array([])
        })
      ]),
      principalAddress: this.formBuilder.group({
        street: ["", [Validators.required]],
        postalCode: ["", [Validators.required, postalCodeValidator]],
        region: ["", [Validators.required]]
      })
    });
  }

  //clear field
  revert() {
    this.addSocieteForm.reset();
  }

  get prestationNames(): FormArray {
    return this.addSocieteForm.get("prestationNames") as FormArray;
  }

  get prestationNamesControls() {
    return this.addSocieteForm.get("prestationNames")["controls"];
  }

  //get principal adress fields
  get principalAdress() {
    return this.addSocieteForm.get("principalAddress") as FormGroup;
  }

  // get controls for principal adress fields
  get principalAdressControls() {
    return this.addSocieteForm.get("principalAddress")["controls"];
  }

  // get form controls
  get f() {
    return this.addSocieteForm.controls;
  }

  // get adresses formArray
  get addresses(): FormArray {
    return this.addSocieteForm.get("addresses") as FormArray;
  }

  // get groups formArray
  get groups(): FormArray {
    return this.addSocieteForm.get("groups") as FormArray;
  }

  // get controls for groups formArray
  get groupsControls() {
    return this.addSocieteForm.get("groups")["controls"];
  }

  get asdressControls() {
    return this.addSocieteForm.get("addresses")["controls"];
  }

  addAdress() {
    if (this.numberOfAdresses < 2) {
      const item = {
        street: "",
        postalCode: "",
        region: ""
      };
      this.arrayOfadresses.push(item);
      this.addresses.push(this.formBuilder.group(item));
      this.numberOfAdresses++;
    } else {
      alert("nombre maximum d'adresse possible atteints");
    }
    console.log(this.addresses.controls);
  }

  // remove adress from aderesses formArray
  removeAdress(index) {
    this.addresses.removeAt(index);
    this.numberOfAdresses--;
  }

  // add a group as formArray
  addGroup() {
    const newGroup = {
      name: "",
      defaultGroup: false,
      prestationNames: this.formBuilder.array([this.formBuilder.control("")])
    };
    this.groups.push(this.formBuilder.group(newGroup));
  }

  //remove group from groups formArray
  removeGroup(index) {
    this.groups.removeAt(index);
  }

  onSubmitForm() {
    console.log(this.addSocieteForm.value);
    // save the company and subscribe to data
    this.societeServ.addCompany(this.addSocieteForm.value).subscribe(data => {
      console.log(data);
    });
  }
}

导出类AddSociateComponent实现OnInit{
addSocieteForm:FormGroup；
ArrayOfAddresses:{street:String；postalCode:String；region:String}[]；
numberofaddress:number=0；
listOfPrestation=[]；
//现在硬编码
救济金=[
{id:1，名字：“plomberie”}，
{id:2，名称：“chaud froid”}，
{id:3，名字：“electricité”}
];
建造师(
私有formBuilder:formBuilder，
私人社会服务：社会服务，
专用服务服务：服务服务服务
) {}
恩戈尼尼特（）{
//获取组件初始化时的预设列表
this.serviceServ.getAllCatgories（）.subscribe（数据=>{
this.listOfPrestation=数据；
console.log（this.listOfPrestation）；
});
this.initForm（）；
console.log（this.groups）；
console.log（“pres”，this.groupsControl[0]。get（“prestationNames”）；
}
initForm（）{
//为复选框创建控件
让chekControls=this.prestations.map（元素=>{
返回此.formBuilder.control（element.name）；
});
控制台日志（“检查”，检查控制）；
this.addSocieteForm=this.formBuilder.group({
名称：[“”，[Validators.required]]，
代码：[“”，[Validators.required，codeSocieteValidator]]，
activityField:[“”，[Validators.required]]，
说明：[“”，[Validators.required]]，
域名：[“”，[Validators.required]]，
地址：this.formBuilder.array（[]），
组：this.formBuilder.array([
此为.formBuilder.group({
名称：[“”，[Validators.required]]，
defaultGroup:[false，[]]，
prestationNames:this.formBuilder.array（[]）
})
]),
principalAddress:this.formBuilder.group({
街道：[“”，[Validators.required]]，
postalCode:[“”，[validator.required，postalCodeValidator]]，
区域：[“”，[Validators.required]]
})
});
}
//净场
还原（）{
这个.addSociateForm.reset（）；
}
获取prestationNames（）：FormArray{
将此.addSociateForm.get（“prestationNames”）作为FormArray返回；
}
获取prestationNamesControls（）{
返回此.addSociateForm.get（“prestationNames”）[“controls”]；
}
//获取主地址字段
获取主礼服（）{
将这个.addSociateForm.get（“principalAddress”）作为FormGroup返回；
}
//获取主地址字段的控件
获取PrincipalAddressControls（）{
返回这个.addSocieteForm.get（“principalAddress”）[“controls”]；
}
//获取表单控件
得到f（）{
返回this.addSocieteForm.controls；
}
//获得正式地址
获取地址（）：FormArray{
将此.addSociateForm.get（“地址”）作为FormArray返回；
}
//集合
获取组（）：FormArray{
将此.addSociateForm.get（“组”）作为FormArray返回；
}
//获取组的控件
获取GroupsControl（）{
返回此.addSociateForm.get（“组”）[“控件”]；
}
获取asdressControls（）{
返回此.addSociateForm.get（“地址”）[“控件”]；
}
地址（）{
如果（此.numberOfAddresses<2）{
常数项={
街道：“，
后代码：“，
区域：“
};
此.ArrayOfAddresss.push（项目）；
this.addresses.push（this.formBuilder.group（item））；
这个.numberOfAddresses++；
}否则{
警报（“标称最大地址可能尝试”）；
}
console.log（this.addresses.controls）；
}
//从aderesses formArray中删除地址
删除地址（索引）{
this.addresses.removeAt（索引）；
这个数字是多少；
}
//将组添加为formArray
addGroup（）{
常量新组={
姓名：“，
defaultGroup:false，
prestationNames:this.formBuilder.array（[this.formBuilder.control（“”）））
};
this.groups.push（this.formBuilder.group（newGroup））；
}
//从组阵列中删除组
removeGroup（索引）{
此.groups.removeAt（索引）；
}
onSubmitForm（）{
log（this.addSocieteForm.value）；
//保存公司并订阅数据
this.societeServ.addCompany（this.addSocieteForm.value）.subscribe（数据=>{
控制台日志（数据）；
});
}
}

涉及组和PrestationName的html部分：

<div class="row" formArrayName="groups">
                 <div *ngFor="let group of groups.controls; let i=index"
                 [formGroup]="groups.controls[i]" class="row">
                         <div class="col">
                           <div class="form-group mt-4">
                              <div class="checkbox">
                                  <label><input formControlName="defaultGroup" type="checkbox">groupe par defaut</label>
                                </div>
                           </div>
                         </div>
                        <div class="col">
                           <div class="form-group">
                              <label for="name"> Nom groupe</label>
                              <input class="form-control" formControlName="name" type="text">
                           </div>
                        </div>

                         <div class="col" formArrayName="prestationNames">
                             <div *ngFor="let prestation of group.get('prestationNames').controls; let nameIndex=index"

                             >
                              <div class="col-4">
                             <div class="form-group">
                                <div class="checkbox">
                                    <label><input [formControlName]="nameIndex" type="checkbox">{{prestations[nameIndex].name}}</label>
                                  </div>

                             </div>
                              </div>
                            </div>

                         </div>
                         <div class="col mt-2">
                           <div class="form-group">
                           <button
                          type="button"
                            class="btn btn-default mt-4 add-remove-button group-button"
                            (click)="removeGroup(i)"
                          >
                            -
                          </button>

                          </div>
                        </div>
                 </div>

               </div>

票房金额
Nom群
{{prestations[nameIndex].name}
-

由于您从API获取数据，请尝试在订阅中创建表单这可能吗？当复选框不可用时，另一个问题是