Angular 17结合ngFor使用Bootstrap 5折叠面板时全部展开问题求助

你的问题核心是动态ID和目标选择器的绑定方式错误，导致所有折叠面板共用了相同的标识，Bootstrap无法区分单个面板。以下是修正后的代码和关键说明：

修正后的代码 #

<div class="accordion w-50 mx-auto" id="accordionExample">
  <div *ngFor="let note of notes; index as i;">
    <div class="accordion-item">
      <h2 class="accordion-header" [id]="'heading-' + i">
        <button class="accordion-button collapsed" 
                type="button" 
                data-bs-toggle="collapse" 
                [attr.data-bs-target]="'#collapse-' + i" 
                [attr.aria-expanded]="false"
                [attr.aria-controls]="'collapse-' + i">
          {{note.subject}}
        </button>
      </h2>
      <div [id]="'collapse-' + i" 
           class="accordion-collapse collapse" 
           [attr.aria-labelledby]="'heading-' + i" 
           data-bs-parent="#accordionExample">
        <div class="accordion-body">
          {{note.text}}
          <div class="mt-2">
            <button class="btn btn-sm btn-primary" type="button">Edit</button>
            <button class="btn btn-sm btn-danger ms-3" type="button">Delete</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改点说明 #

• 动态生成唯一ID：用Angular属性绑定语法[id]="'heading-' + i"和[id]="'collapse-' + i"，为每个面板生成唯一标识（如heading-0、collapse-0），避免所有面板共用同一ID。
• 正确绑定目标选择器：data-bs-target是HTML属性，需通过[attr.data-bs-target]动态绑定，才能生成对应面板的选择器（如#collapse-0），而非静态字符串。
• 修复无障碍属性关联：aria-expanded初始设为false（匹配按钮collapsed状态），aria-controls和aria-labelledby分别对应折叠面板ID和标题ID，确保属性关联正确。
• 移除重复静态ID：原代码所有标题ID均为headingOne （带空格），改为动态生成后彻底解决ID重复问题。

修改后每个折叠面板都有独立标识，点击单个按钮只会展开对应面板，不会出现同步展开的问题。

内容的提问来源于stack exchange，提问作者Γιώργος Κατσαφάνας