Angular 12 Bootstrap 5 ngFor 手风琴不关闭

如何解决Angular 12 Bootstrap 5 ngFor 手风琴不关闭

我正在尝试使用引导程序 5 在 Angular 12 中创建一个 ngFor 下拉手风琴列表。不知何故，手风琴保持打开状态并且无法关闭。

我希望有人知道如何使手风琴能够关闭。

https://getbootstrap.com/docs/5.0/components/accordion/

    <div class="accordion">
        <div class="accordion-item" *ngFor="let category of cateories; let i = index">
            <h2 class="accordion-header" [attr.id]="'heading' + i">
                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                    [attr.data-target]="'#collapse' + i" aria-expanded="true" [attr.aria-controls]="'collapse' + i">
                    {{ category.title }}
                </button>
            </h2>
            <div [attr.id]="'collapse' + i" class="accordion-collapse collapse show" [attr.aria-labelledby]="'heading' + i"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <ul>
                        <li *ngFor="let childCategory of category.children">{{ childCategory.title }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

解决方法

不知何故，手风琴保持打开状态，无法关闭。

这是因为您还没有定义任何方法来关闭它。您可能需要配置 JQuery 和 bootstrap 脚本文件……不推荐。

我建议您考虑为此类组件使用库，例如​​ ngx-accordion

另一种解决方案是简单地硬编码逻辑来关闭和打开手风琴

您可以设置一个属性来跟踪手风琴是否打开。在您的 TS 文件中

openAccordion: boolean[] = []

在你的 html 中

<div class="accordion">
  <div class="accordion-item" *ngFor="let category of cateories; let i = index">
    <h2 class="accordion-header" [attr.id]="'heading' + i">
      <button class="accordion-button" type="button"
            (click)='openAccordion[i] = !openAccordion[i]' data-bs-toggle="collapse"
                [attr.data-target]="'#collapse' + i" aria-expanded="true" [attr.aria-controls]="'collapse' + i">
                {{ category.title }}
            </button>
    </h2>
    <div [attr.id]="'collapse' + i" class="accordion-collapse collapse" [class.show]='openAccordion[i]'
      [attr.aria-labelledby]="'heading' + i" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <ul>
          <li *ngFor="let childCategory of category.children">{{ childCategory.title }}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Sample Demo Here

另一个选项是包含 bootstrap js 文件。下面是如何实现的演示

<div class="accordion" id="accordionContainer">
  <div class="accordion-item" *ngFor="let category of cateories; let i = index">
    <h2 class="accordion-header" [id]="'heading' + i">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse' + i" aria-expanded="true" [attr.aria-controls]="'collapse' + i">
       {{ category.title }}
      </button>
    </h2>
    <div [id]="'collapse' + i" class="accordion-collapse collapse show" [attr.aria-labelledby]="'heading' + i"
      data-bs-parent="#accordionContainer">
      <div class="accordion-body">
        <ul>
          <li *ngFor="let childCategory of category.children">{{ childCategory.title }}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

See Demo