Angular 如何将对象数组映射到角度方向上的formarray

将数据数组映射到数组中的复选框的正确方法是什么？ 我尝试了下面的代码，但它不起作用…目标是从httpclient获取信息并将其映射到数据数组，这没问题，但无法将数据数组映射到正确的数组形式

data = [
      { id: false, name: "Ovo" },
      { id: false, name: "Ono" },
      { id: false, name: "Levo" },
      { id: false, name: "Desno" }
    ];

模板

<form [formGroup]="postForm">
  <div formGroupName="detaljne">
    <div
      formArrayName="checkboxes"
      *ngFor="let data of data; let i = index"
    >
      <input [id]="data.id" type="checkbox" [formControl]="checkboxes[i]" />
      <label [for]="data.id">
        {{ data.name }}</label
      >
    </div>
  </div>
</form>

{{data.name}

您只需在索引的复选框数组基中设置formControtName

这就是我如何设置控件数据的方法

  ngOnInit() {
    const cData: IControls<boolean>[] = [
      { value: false, name: "Ovo" },
      { value: true, name: "Ono" },
      { value: false, name: "Levo" },
      { value: true, name: "Desno" }
    ]
    this.updateDataControls(cData)

  }

  updateDataControls(controls: IControls<any>[]) {
    this.data = controls;
    const controlsForm = this.form.get('controls').get('checkboxes') as FormArray;
    for (const c of controls) {
      controlsForm.push(this.fb.control(c.value))
    }
  }

ngOnInit（）{
常量cData:IControls[]=[
{value:false，名称：“Ovo”}，
{value:true，名称：“Ono”}，
{value:false，名称：“Levo”}，
{value:true，名称：“Desno”}
]
此.updateDataControl（cData）
}
UpdateDataControl（控件：IControls[]）{
这个数据=控制；
const controlsForm=this.form.get（'controls'）。get（'checkbox'）作为FormArray；
用于（控制常数c）{
控件窗体推送（此.fb.control（c.value））
}
}

模板

{{c.name}}

请在中查看完整的示例

  ngOnInit() {
    const cData: IControls<boolean>[] = [
      { value: false, name: "Ovo" },
      { value: true, name: "Ono" },
      { value: false, name: "Levo" },
      { value: true, name: "Desno" }
    ]
    this.updateDataControls(cData)

  }

  updateDataControls(controls: IControls<any>[]) {
    this.data = controls;
    const controlsForm = this.form.get('controls').get('checkboxes') as FormArray;
    for (const c of controls) {
      controlsForm.push(this.fb.control(c.value))
    }
  }

<div [formGroup]="form">
    <div formGroupName="controls">
        <div formArrayName="checkboxes">
            <div *ngFor="let c of data;let index = index">
                <label>{{c.name}}</label>
        <input type="checkbox" [formControlName]="index" >
      </div>
     </div>
  </div>
</div>