我想使用角BooTrap的手风琴与表单array.

但是,只要我在Accordion中添加任何类型的表单绑定,它就不会再打开,也不会收到任何异常错误.我使用的是ng-bootstrap版本15.1.1

手风琴模板代码:

<div ngbAccordion>
  <ng-container [formGroup]="form">
    <ng-container [formArrayName]="'worksheets'">
      <div ngbAccordionItem *ngFor="let worksheet of form.value.worksheets; let i = index;">

        <h2 ngbAccordionHeader>
          <button ngbAccordionButton>{{ worksheet.name }}</button>
        </h2>
        <div ngbAccordionCollapse>
          <div ngbAccordionBody>
            <ng-template>
              <ng-container [formGroupName]="i">
                <label for="name1">Name</label>
                <input id="name1" type="text" [formControlName]="'name'">
              </ng-container>
            </ng-template>
          </div>
        </div>

      </div>
    </ng-container>
  </ng-container>
</div>

StackFlash:https://stackblitz.com/edit/angular-knog2w?file=src%2Fapp%2Faccordion-basic.html

如果我go 掉[formGroupName][formControlName]装订,手风琴就会如期打开.

我的功能模块包括FormsModuleReactiveFormsModules,以及NgbAccordionModuleNgbCollapseModule模块.

我错过了什么吗?在手风琴中可以使用形式吗?

推荐答案

在与ng-bootstrap:https://github.com/ng-bootstrap/ng-bootstrap/issues/4615#issuecomment-1808145224的开发人员交谈后,

这个问题可以通过向*ngFor添加trackBy函数来限制更改DOM的次数来解决.

Angular相关问答推荐

Angular - Bootstrap 5 Carbon不工作

按Angular 从组件的 bootstrap 选项卡中删除活动类

判断哪个Angular 信号导致了影响

要素存储更改根存储状态

成Angular 的嵌套router-outlet

更改动态表单控制Angular 的值

Angular 17+独立配置中main.ts bootstrap 调用的最佳实践

所有返回缺少权限或权限不足的FireBase项目.

使用BLOB数据类型时,HTTPCLIENT中可能存在错误

一个接一个的Angular http请求,但只关心第一个

使用 primeng Apollo 主题进行实时部署时多次加载 theme.css 和 preloading.css 文件

Angular 15 在 URL 中使用@进行路由

NgRx Effects 抛出类型错误,我不知道发生了什么

在父组件的子组件中使用 ng-template

尽管模型中的变量发生了变化,但Angular 视图没有更新

Angular2 Material Dialog css,对话框大小

如何以像素为单位将属性绑定到 style.width?

Angular 2.0 中 $scope 的替代品

在同一个组件中使用 MatSort 的多个 mat-table

将 [NgStyle] 与条件组合(if..else)