Angular 12 Bootstrap 5 ngFor accordion 不关闭
Angular 12 Bootstrap 5 ngFor accordion does not close
我正在尝试在 Angular 12 和 bootstrap 5 中创建一个 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>
Somehow the accordions stay open and can not be closed.
这是因为您还没有定义任何关闭方法。您可能需要配置 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>
另一个选项是包含 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>
我正在尝试在 Angular 12 和 bootstrap 5 中创建一个 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>
Somehow the accordions stay open and can not be closed.
这是因为您还没有定义任何关闭方法。您可能需要配置 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>
另一个选项是包含 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>