Angular中如何在模板展示Form Builder构建的扁平数组FormArray？

嘿，这个问题我之前也碰到过，很容易解决的！你已经在组件里把扁平数组正确导入FormArray了，剩下的就是在模板里正确绑定这些控件就行，我给你一步步讲清楚：

首先得确保你的整个表单被formGroup指令包裹，不然formArrayName找不到对应的表单上下文。然后结合*ngFor遍历FormArray的控件，用索引绑定每个控件：

模板代码示例 #

<!-- 先包裹整个表单组 -->
<form [formGroup]="myForm">
  <!-- 在ol上设置formArrayName，和你组件里的名称对应 -->
  <ol formArrayName="Answers">
    <!-- 遍历Answers数组的每个控件，同时获取索引 -->
    <li *ngFor="let answerControl of answersArray.controls; let answerIndex = index">
      <!-- 如果是可编辑的输入框，用索引绑定formControlName -->
      <input type="text" [formControlName]="answerIndex" />
      
      <!-- 要是你只想展示只读的答案，直接用插值表达式就行 -->
      <!-- <span>{{ answerControl.value }}</span> -->
    </li>
  </ol>
</form>

组件类添加便捷Getter（可选但推荐） #

为了模板里的代码更简洁，避免重复写(<FormArray>this.myForm.get('Answers'))，可以在组件类里加一个getter：

// 组件类里的代码
get answersArray(): FormArray {
  return this.myForm.get('Answers') as FormArray;
}

关键细节说明 #

• 一定要有外层的[formGroup]="myForm"容器，这是Angular表单指令的上下文基础，不然formArrayName会失效。
• *ngFor要遍历的是表单数组的controls集合，而不是原始的existingProfileDetail.Answers数组，这样才能和表单控件绑定。
• 用[formControlName]="answerIndex"来绑定每个控件，因为FormArray里的控件是按索引顺序存储的，刚好对应你之前push进去的每个元素。

这样设置完，你之前导入的red、blue、yellow就会正确显示在模板里啦～

内容的提问来源于stack exchange，提问作者Andrew Howard