用FormArray Angular在formGroup中加载数据

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

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index">
          <input [formControlName]="i" placeholder="Item {{ i + 1 }}">
        </div>
      </div>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class FormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      items: this.fb.array([]),
    });
  }

  get items() {
    return this.myForm.get('items') as FormArray;
  }

  onSubmit() {
    console.log(this.myForm.value);
  }

  loadData() {
    // 假设从服务器获取到的数据为 ['Apple', 'Banana', 'Orange']
    const data = ['Apple', 'Banana', 'Orange'];

    // 清空原有的表单控件
    while (this.items.length !== 0) {
      this.items.removeAt(0);
    }

    // 根据数据动态添加表单控件
    data.forEach((item) => {
      this.items.push(this.fb.control(item));
    });
  }
}