ng-bootstrap 手风琴不适用于 *ngFor 和 formArray

Question

我正在使用 ng-bootstrap 16 在 Angular 17 中编写一个项目，我有一个复杂的对象，需要将其转换为表单组，以便用户可以编辑它。

但是，当我想用主 formGroup 内的 formGroup 的 formArray 制作手风琴时，手风琴上的切换不再起作用。

我在 stackblitz 中复制了这个问题：

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

谁能帮我看看我做错了什么？

我尝试复制这种情况以查看问题所在，似乎当我删除 formgroupname 属性时，手风琴再次工作，但由于我想在原始项目中的手风琴标题中有一个输入字段，所以我不明白我怎么能省略这个属性...

Answer 1

为您的 *ngFor 循环实现

trackBy

函数。这有助于 Angular 通过更改跟踪每个项目的身份并防止不必要的 DOM 操作。它可以提高性能并可能解决手风琴行为的问题。

trackByFn(index, item) {
  return item.id; // or any unique property of items in the formArray
}

在你的模板中：

*ngFor="let group of formArray; trackBy: trackByFn"