求助：ngbAccordion的[closeOthers]属性与*ngFor结合失效

你的核心问题是把*ngFor错误地放在了ngbAccordion容器上，这会导致每个列表项都生成一个独立的手风琴组件，彼此完全隔离，[closeOthers]自然无法跨手风琴控制展开状态。

修正后的正确结构 #

将*ngFor移到ngbAccordionItem元素上，让所有列表项属于同一个手风琴容器：

<div ngbAccordion #myAccordion="ngbAccordion" [closeOthers]="true">
  <div *ngFor="let item of items; let idx = index"
       ngbAccordionItem="{{idx}}"
       #myItem="ngbAccordionItem"
       [collapsed]="true">
    <!-- 手风琴头部 -->
    <h2 ngbAccordionHeader>
      <button ngbAccordionButton>{{ item.title }}</button>
    </h2>
    <!-- 手风琴内容区 -->
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        {{ item.content }}
      </div>
    </div>
  </div>
</div>

关键说明 #

1. 容器与项的层级关系：ngbAccordion是整个手风琴的容器，所有可展开项ngbAccordionItem必须放在它内部，[closeOthers]才会对容器内的所有项生效。
2. 唯一ID绑定：每个ngbAccordionItem需要唯一的标识，这里用循环的index作为ID，也可以用数据项本身的唯一属性（比如item.id），避免ID冲突导致的异常。
3. 模板引用变量无需动态命名：循环内的#myItem会自动为每个项创建独立的引用，不需要手动命名为myItem1、myItem2，Angular会在循环上下文里处理隔离。

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