ng-bootstrap折叠面板含响应式表单绑定后无法展开问题排查

你遇到的问题核心原因是***ngFor遍历的是表单值而非表单控件引用**，导致表单绑定触发值更新时，折叠面板组件被频繁重新渲染，重置了展开状态。

修正步骤： #

1. 在组件类中添加一个FormArray的getter，方便模板调用：

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

2. 修改模板代码，改用遍历表单控件集合而非表单值：

<div ngbAccordion>
  <ng-container [formGroup]="form">
    <ng-container formArrayName="worksheets">
      <div ngbAccordionItem *ngFor="let worksheet of worksheets.controls; let i = index;">
        <h2 ngbAccordionHeader>
          <button ngbAccordionButton>{{ worksheet.get('name')?.value }}</button>
        </h2>
        <div ngbAccordionCollapse>
          <div ngbAccordionBody>
            <ng-template>
              <ng-container [formGroupName]="i">
                <label for="name{{i}}">Name</label>
                <input id="name{{i}}" type="text" formControlName="name">
              </ng-container>
            </ng-template>
          </div>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>

关键说明： #

• 替换form.value.worksheets为worksheets.controls：表单控件的引用是稳定的，只有当控件数量增减时才会触发*ngFor重新渲染，避免了值更新导致的组件重置。
• 从控件实例获取值：worksheet.get('name')?.value直接关联表单控件，保证数据同步的同时不会触发不必要的渲染。
• 唯一化input的id：用name{{i}}避免多个折叠面板内的input重复id，符合HTML规范。

你已经正确导入了所需模块，不需要额外配置。

内容的提问来源于stack exchange，提问作者Brandon Taylor