从api调用中动态创建angular reactive形式的复选框

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { ApiService } from 'your-api-service'; // 替换为你的API服务

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  form: FormGroup;
  checkboxes: any[]; // 存储复选框选项的数组

  constructor(private formBuilder: FormBuilder, private apiService: ApiService) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      checkboxes: this.formBuilder.array([]) // 使用FormBuilder创建一个空的FormArray
    });

    this.apiService.getCheckboxes().subscribe(data => {
      this.checkboxes = data; // 从API调用中获取复选框选项的数据
      this.addCheckboxes(); // 调用addCheckboxes方法动态创建复选框
    });
  }

  addCheckboxes() {
    this.checkboxes.forEach((checkbox) => {
      const control = this.formBuilder.control(false); // 使用FormBuilder创建一个复选框控件
      (this.form.controls.checkboxes as FormArray).push(control); // 将复选框控件添加到FormArray中
    });
  }

  submit() {
    const selectedCheckboxes = this.form.value.checkboxes
      .map((checked, i) => checked ? this.checkboxes[i] : null)
      .filter(value => value !== null);
    console.log(selectedCheckboxes); // 打印选中的复选框选项
  }
}

<form [formGroup]="form" (ngSubmit)="submit()">
  <div formArrayName="checkboxes">
    <div *ngFor="let checkbox of form.controls.checkboxes.controls; let i = index">
      <label>
        <input type="checkbox" [formControlName]="i">
        {{ checkboxes[i].label }}
      </label>
    </div>
  </div>
  <button type="submit">提交</button>
</form>