如何为Angular+Bootstrap 4动态手风琴添加展开/收起全部按钮？

步骤1：修改组件模板 #

在手风琴容器上方新增展开/收起按钮，同时调整原有手风琴项的绑定逻辑，用数组维护每个项的展开状态：

<!-- 新增展开/收起控制按钮 -->
<div class="mb-3">
  <button class="btn btn-primary mr-2" (click)="expandAll()">展开全部</button>
  <button class="btn btn-secondary" (click)="collapseAll()">收起全部</button>
</div>

<div id="accordion">
  <div *ngFor="let Party of PartyF; let i = index">
    <div class="card">
      <div class="card-header">
        <button 
          type="button" 
          class="btn btn-link" 
          (click)="toggleItem(i)"
          [attr.aria-expanded]="expandedStates[i]"
          [attr.aria-controls]="'data' + i"
        >
          {{ Party.title }} <!-- 替换为你的手风琴标题内容 -->
        </button>
      </div>
      <div 
        [attr.id]="'data' + i" 
        class="collapse" 
        [ngClass]="{ show: expandedStates[i] }"
        data-parent="#accordion"
      >
        <div class="card-body">
          <!-- 手风琴内容区域 -->
          {{ Party.content }}
        </div>
      </div>
    </div>
  </div>
</div>

步骤2：实现组件逻辑 #

在Angular组件类中添加状态数组和控制方法，统一管理手风琴的展开/收起状态：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component', // 替换为你的组件选择器
  templateUrl: './your-component.component.html', // 替换为你的模板路径
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  PartyF: any[] = []; // 你的数据源，根据实际业务赋值
  expandedStates: boolean[] = [];

  ngOnInit(): void {
    // 初始化状态：保持原逻辑，最后一项默认展开
    this.expandedStates = this.PartyF.map((_, index) => index === this.PartyF.length - 1);
  }

  // 切换单个手风琴项的展开状态
  toggleItem(index: number): void {
    this.expandedStates[index] = !this.expandedStates[index];
  }

  // 展开所有手风琴项
  expandAll(): void {
    this.expandedStates = this.PartyF.map(() => true);
  }

  // 收起所有手风琴项
  collapseAll(): void {
    this.expandedStates = this.PartyF.map(() => false);
  }
}

注意事项 #

• 完全通过Angular数据绑定控制状态，避免与Bootstrap的jQuery插件混用，符合Angular开发规范
• 同步更新aria-expanded属性，保证组件的可访问性
• 若你的PartyF数据源是异步加载的，需要在数据加载完成后重新初始化expandedStates数组

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