角反应形式，填充嵌套formArray

Question

example我有一个具有结构的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除外，  每个组数组都有一个prestationNames数组，需要从后端填充。

我的问题是如何从prestationNames填充array？ 如何在html中正确绑定它？ 如何获取数据值并将其显示在chekbox标签中，单击时应插入非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);
    });
  }
}

有关组和prestationNames的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>