Angular新手求助：手风琴组件点击单个项触发全部展开/收起的修复方法

嘿，我懂你的困扰！现在所有FAQ条目共用同一个showDetail变量，所以一点击就全部联动展开或收起了对吧？咱们只需要给每个FAQ项单独维护自己的展开状态，就能实现点击单个条目独立控制的手风琴效果啦。

第一步：修改TypeScript代码 #

首先，给每个FAQ对象添加一个isExpanded属性来记录自身的展开状态，同时简化toggle逻辑：

import { Component, OnInit } from '@angular/core';
import {faChevronUp, faChevronDown, IconDefinition} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-jobs-faq',
  templateUrl: './jobs-faq.component.html',
  styleUrls: ['./jobs-faq.component.scss']
})
export class JobsFaqComponent implements OnInit {
  faChevronUp: IconDefinition = faChevronUp;
  faChevronDown: IconDefinition = faChevronDown;
  
  faqs = [
    { id: 1, title: 'faq1', content: 'content1', isExpanded: false },
    { id: 2, title: 'faq2', content: 'content2', isExpanded: false },
    { id: 3, title: 'faq3', content: 'content3', isExpanded: false }
  ];

  constructor() { }

  toggleDetail(faq: any): void {
    // 只切换当前点击的FAQ项的展开状态
    faq.isExpanded = !faq.isExpanded;
  }

  ngOnInit() { }
}

第二步：修改HTML模板 #

接下来调整模板，让每个条目根据自身的isExpanded状态来控制内容显示和图标切换：

<div class="faq-item-container">
  <h1 class="mt-1 mb-5"><strong>Frequently Asked Questions</strong></h1>
  <div class="row" (click)="toggleDetail(faq)" *ngFor= "let faq of faqs">
    <div class="col my-2">
      <h3> 
        {{faq.title}} 
        <a><fa-icon [icon]="faq.isExpanded ? faChevronUp : faChevronDown" class="float-right"></fa-icon></a>
      </h3>
    </div>
    <div class="col-12" *ngIf="faq.isExpanded">
      <div class="faq-detail-container mt-1">
        <div class="col-12">
          <p><small> {{faq.content}} </small></p>
        </div>
      </div>
    </div>
  </div>
</div>

为什么这样改？ #

• 每个FAQ项都拥有了独立的isExpanded状态，点击时只会切换当前项的状态，完全不会影响其他条目
• 图标直接通过三元表达式根据当前项的状态动态切换，省去了单独的toggleIcon函数，逻辑更简洁直观

这样调整后，你的手风琴组件就能正常工作啦，点击单个FAQ项只会展开/收起自己的内容~

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