Angular 10 reactive form -在表单显示后更新复选框数组

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-checkbox-form',
  templateUrl: './checkbox-form.component.html',
  styleUrls: ['./checkbox-form.component.css']
})
export class CheckboxFormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      checkboxes: this.fb.array([])
    });

    // 模拟在表单显示后更新复选框数组
    setTimeout(() => {
      this.updateCheckboxes();
    }, 1000);
  }

  get checkboxes(): FormArray {
    return this.form.get('checkboxes') as FormArray;
  }

  updateCheckboxes(): void {
    const newCheckboxes = this.fb.array([
      this.fb.control(false),
      this.fb.control(true),
      this.fb.control(false)
    ]);

    this.form.setControl('checkboxes', newCheckboxes);
  }
}

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