Bootstrap 4 和 Angular 展开所有动态添加的手风琴

Answer 1

<div id="accordion">
  <button type="button" class="btn btn-primary mb-2" (click)="expandAll()">Expand All</button>

  <button type="button" class="btn btn-secondary mb-2" (click)="collapseAll()">Collapse All</button>

  <div *ngFor="let party of PartyF; let i = index;">
    <div class="card">
      <div class="card-header">
        <button type="button" class="btn btn-link"
                data-toggle="collapse"
                [attr.data-target]="'#data' + i"
                (click)="togglePanel(i)"
                [aria-expanded]="isPanelOpen(i)"
                [attr.aria-controls]="'data' + i">
          {{ party.title }} </button>
      </div>
      <div [attr.id]="'data' + i" class="collapse"
           [ngClass]="{ show: activePanels.includes(i) }"
           data-parent="#accordion">
        <div class="card-body">
          {{ party.content }} </div>
      </div>
    </div>
  </div>
</div>

创建一个

activePanels

数组（在组件的 TypeScript 中）来跟踪当前展开的面板。

export class MyAccordionComponent {
  PartyF = [
    // Your party data with title and content properties
  ];
  activePanels: number[] = []; // Initially all closed

  togglePanel(index: number) {
    if (this.activePanels.includes(index)) {
      this.activePanels = this.activePanels.filter(p => p !== index);
    } else {
      this.activePanels.push(index);
    }
  }

  expandAll() {
    this.activePanels = [...Array(this.PartyF.length).keys()]; // Expand all
  }

  collapseAll() {
    this.activePanels = []; // Collapse all
  }

  isPanelOpen(index: number): boolean {
    return this.activePanels.includes(index);
  }
}