如何在超文本标记语言中迭代FormArray？

在超文本标记语言（HTML）中迭代FormArray可以通过使用ngFor指令来实现。ngFor指令是Angular框架中的一个结构型指令，用于在HTML模板中循环渲染一组元素。

要在HTML中迭代FormArray，可以按照以下步骤进行操作：

1. 在组件类中定义一个FormArray对象，并将其初始化为空数组。

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

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <div formArrayName="myArray">
        <div *ngFor="let control of myForm.get('myArray').controls; let i = index">
          <input [formControlName]="i" />
        </div>
      </div>
    </form>
  `,
})
export class ExampleComponent {
  myForm: FormGroup;

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

1. 在HTML模板中，使用ngFor指令来迭代FormArray中的每个控件，并为每个控件创建一个表单控件。

<form [formGroup]="myForm">
  <div formArrayName="myArray">
    <div *ngFor="let control of myForm.get('myArray').controls; let i = index">
      <input [formControlName]="i" />
    </div>
  </div>
</form>

在上述示例中，ngFor指令用于循环遍历myForm中的myArray控件数组。对于每个控件，我们使用formControlName指令将其与相应的索引关联起来，并在HTML中创建一个输入框。

这样，当FormArray中的控件发生变化时，HTML模板会自动更新以反映这些变化。

请注意，上述示例中使用了Angular的响应式表单（Reactive Forms）来处理表单控件。如果你使用的是模板驱动表单（Template-driven Forms），则需要使用ngModel指令来绑定表单控件。

腾讯云相关产品和产品介绍链接地址：

• 云开发（CloudBase）：https://cloud.tencent.com/product/tcb
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr