如何在ngFor循环后为单个组件添加类？手风琴组件独立展开折叠实现

嘿，我完全懂你现在的困扰——用*ngFor循环渲染的手风琴组件居然会同时展开或折叠，这显然不是你想要的独立控制效果。问题的核心在于你大概率用了单个全局状态变量来控制所有手风琴的展开状态，所以点击时所有组件都会同步响应。下面我给你一套清晰的解决方案：

第一步：为每个手风琴项维护独立状态 #

在你的accordion.component.ts里，不要用单个boolean变量（比如isExpanded: boolean = false），而是用一个对象来存储每个项的展开状态。这样每个手风琴都有自己的开关状态：

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

@Component({
  selector: 'app-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.css']
})
export class AccordionComponent {
  @Input() people: any[] = []; // 假设父组件传入people数组
  // 用对象存储每个项的展开状态，键可以是索引或person的唯一ID
  expandedStates: { [key: number]: boolean } = {};

  // 切换指定索引项的展开状态
  toggleAccordion(index: number): void {
    // 如果当前项没有状态记录，默认设为false（折叠），然后取反
    this.expandedStates[index] = !this.expandedStates[index];
  }
}

如果你的person对象有唯一标识符（比如id），用id作为键会更可靠（避免数组顺序变化导致索引失效）：

// 假设person有id属性，类型为string或number
expandedStates: { [key: string]: boolean } = {};

toggleAccordion(personId: string): void {
  this.expandedStates[personId] = !this.expandedStates[personId];
}

第二步：修改模板绑定逻辑 #

在accordion.component.html中，给*ngFor加上索引（或使用person的id），然后把状态绑定到当前项的类和显示隐藏逻辑上：

用索引的模板示例： #

<div *ngFor="let person of people; let i = index" 
     class="accordion noHighlight" 
     [ngClass]="{'expanded': expandedStates[i] || false}"
     (click)="toggleAccordion(i)">
  <!-- 手风琴头部：包含标题和切换图标 -->
  <div class="accordion-header">
    <h3>{{ person.name }}</h3>
    <!-- 根据状态切换加号/减号图标 -->
    <svg class="toggle-icon" [ngClass]="{'show-minus': expandedStates[i], 'show-plus': !expandedStates[i]}">
      <!-- 你的加号SVG代码 -->
      <path *ngIf="!expandedStates[i]" d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <!-- 你的减号SVG代码 -->
      <path *ngIf="expandedStates[i]" d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
  </div>
  <!-- 手风琴内容：根据状态显示/隐藏 -->
  <div class="accordion-content" *ngIf="expandedStates[i]">
    {{ person.bio }}
  </div>
</div>

用person唯一ID的模板示例： #

<div *ngFor="let person of people" 
     class="accordion noHighlight" 
     [ngClass]="{'expanded': expandedStates[person.id] || false}"
     (click)="toggleAccordion(person.id)">
  <div class="accordion-header">
    <h3>{{ person.name }}</h3>
    <svg class="toggle-icon" [ngClass]="{'show-minus': expandedStates[person.id], 'show-plus': !expandedStates[person.id]}">
      <path *ngIf="!expandedStates[person.id]" d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      <path *ngIf="expandedStates[person.id]" d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
  </div>
  <div class="accordion-content" *ngIf="expandedStates[person.id]">
    {{ person.bio }}
  </div>
</div>

第三步：添加CSS样式（可选但推荐） #

为了让展开折叠有流畅的过渡效果，你可以给.accordion-content加一些样式：

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion.expanded .accordion-content {
  max-height: 500px; /* 根据内容高度调整 */
}

为什么这样能解决问题？ #

每个手风琴项的展开状态都单独存在expandedStates对象中，点击时只会切换当前项对应的状态值（索引或id对应的键），其他项的状态不会受到影响，自然就实现了独立控制的效果。

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