Angular 如何在ngFor之后仅将类应用于一个单独的组件

我正在创建一个手风琴组件，它在单击“加号/减号”svg时会展开和折叠。这种展开和收拢应该进行切换，并且一次只影响一个手风琴组件，独立于其他组件。现在，手风琴一起展开和折叠。如何针对每个组件的类

app.component.html

<app-accordion>
</app-accordion>

<div
*ngFor="let person of people"
class="accordion noHighlight"
[ngClass]="currentClass">
  <app-accordion-header
  (handleExpansion)="handleExpansion($event)"  
  [person]="person">
  </app-accordion-header>
</div>

<div> 
  <div>
    <div>
        <app-plus (handleToggle)="handleToggle($event)"></app-plus>
    </div>
    <div>
      <span>{{person.name}}</span>
    </div>
    <div>
      <span>{{person.age}}</span>
    </div>
    <div>
      <span>{{person.description}}</span>
    </div>
  </div>    
</div> 

<div (click)="toggleExpansion()">
  <svg>
      <g fill="#000000">
        <rect 
        id="plusicon-vertbar"
        class="plusicon-vertbar"
        [ngClass]="icon"
        x="8" 
        y="0" 
        width="4"
        height="20">
        </rect>
        <rect 
        id="plusicon-horizbar"
        transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000)"
        x="8" 
        y="0" 
        width="4"
        height="20">
        </rect>
      </g>
    </g>
  </svg>
</div>

accordion-header.component.html

<app-accordion>
</app-accordion>

<div
*ngFor="let person of people"
class="accordion noHighlight"
[ngClass]="currentClass">
  <app-accordion-header
  (handleExpansion)="handleExpansion($event)"  
  [person]="person">
  </app-accordion-header>
</div>

<div> 
  <div>
    <div>
        <app-plus (handleToggle)="handleToggle($event)"></app-plus>
    </div>
    <div>
      <span>{{person.name}}</span>
    </div>
    <div>
      <span>{{person.age}}</span>
    </div>
    <div>
      <span>{{person.description}}</span>
    </div>
  </div>    
</div> 

<div (click)="toggleExpansion()">
  <svg>
      <g fill="#000000">
        <rect 
        id="plusicon-vertbar"
        class="plusicon-vertbar"
        [ngClass]="icon"
        x="8" 
        y="0" 
        width="4"
        height="20">
        </rect>
        <rect 
        id="plusicon-horizbar"
        transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000)"
        x="8" 
        y="0" 
        width="4"
        height="20">
        </rect>
      </g>
    </g>
  </svg>
</div>

{{person.name}
{{person.age}
{{person.description}

accordion-header.component.ts

import { AccordionService } from "./../accordion.service";
import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "app-accordion",
  templateUrl: "./accordion.component.html",
  styleUrls: ["./accordion.component.css"],
  providers: [AccordionService]
})
export class AccordionComponent implements OnInit {
  plus: string = "../../assets/images/plus.svg";
  minus: string = "../../assets/images/minus.svg";
  people;
  currentClass;
  isOpen;


  constructor(private accordionService: AccordionService) {}

  ngOnInit() {
    this.accordionService.getPeople().subscribe(people => {
      this.people = people;
    });
  }

  toggleOpen(open) {
    open ? (this.currentClass = "expand") : (this.currentClass = "collapse");
  }

  handleExpansion(val) {
    this.isOpen = val;
    this.toggleOpen(this.isOpen);
  }

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-accordion-header",
  templateUrl: "./accordion-header.component.html",
  styleUrls: ["./accordion-header.component.css"]
})
export class AccordionHeaderComponent implements OnInit {

  @Input() person;
  @Output() handleExpansion = new EventEmitter<boolean>()
  isOpen;

  constructor() {}

  ngOnInit() {}

  handleToggle(e){
    this.handleExpansion.emit(e)
  }

}

import { Component, Input, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "app-plus",
  templateUrl: "./plus.component.html",
  styleUrls: ["./plus.component.css"]
})
export class PlusComponent {
  @Output() handleToggle = new EventEmitter<boolean>();
  isOpen: boolean = false;
  icon = "";

  toggleIcon(toggleOpen) {
    toggleOpen ? this.icon = "open" : this.icon = "closed";
  }

  toggleExpansion() {
    this.isOpen = !this.isOpen;
    this.handleToggle.emit(this.isOpen);

    this.toggleIcon(this.isOpen);
  }
}

import{Component，OnInit，Input，Output，EventEmitter}来自“@angular/core”；
@组成部分({
选择器：“应用程序手风琴头”，
templateUrl:“./accordion header.component.html”，
样式URL:[“/accordion header.component.css”]
})
导出类AccordionHeader组件实现OnInit{
@输入（）人；
@Output（）handleExpansion=neweventEmitter（）
等参；
构造函数（）{}
ngOnInit（）{}
手语（e）{
this.handleExpansion.emit（e）
}
}

plus.component.ts

import { AccordionService } from "./../accordion.service";
import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "app-accordion",
  templateUrl: "./accordion.component.html",
  styleUrls: ["./accordion.component.css"],
  providers: [AccordionService]
})
export class AccordionComponent implements OnInit {
  plus: string = "../../assets/images/plus.svg";
  minus: string = "../../assets/images/minus.svg";
  people;
  currentClass;
  isOpen;


  constructor(private accordionService: AccordionService) {}

  ngOnInit() {
    this.accordionService.getPeople().subscribe(people => {
      this.people = people;
    });
  }

  toggleOpen(open) {
    open ? (this.currentClass = "expand") : (this.currentClass = "collapse");
  }

  handleExpansion(val) {
    this.isOpen = val;
    this.toggleOpen(this.isOpen);
  }

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-accordion-header",
  templateUrl: "./accordion-header.component.html",
  styleUrls: ["./accordion-header.component.css"]
})
export class AccordionHeaderComponent implements OnInit {

  @Input() person;
  @Output() handleExpansion = new EventEmitter<boolean>()
  isOpen;

  constructor() {}

  ngOnInit() {}

  handleToggle(e){
    this.handleExpansion.emit(e)
  }

}

import { Component, Input, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "app-plus",
  templateUrl: "./plus.component.html",
  styleUrls: ["./plus.component.css"]
})
export class PlusComponent {
  @Output() handleToggle = new EventEmitter<boolean>();
  isOpen: boolean = false;
  icon = "";

  toggleIcon(toggleOpen) {
    toggleOpen ? this.icon = "open" : this.icon = "closed";
  }

  toggleExpansion() {
    this.isOpen = !this.isOpen;
    this.handleToggle.emit(this.isOpen);

    this.toggleIcon(this.isOpen);
  }
}

import{Component，Input，EventEmitter，Output}来自“@angular/core”；
@组成部分({
选择器：“应用程序升级”，
templateUrl:“./plus.component.html”，
样式URL:[“/plus.component.css”]
})
导出类PlusComponent{
@Output（）handleToggle=新的EventEmitter（）；
等参：布尔=假；
图标=”；
切换图标（切换打开）{
切换打开？this.icon=“打开”：this.icon=“关闭”；
}
toggleExpansion（）{
this.isOpen=！this.isOpen；
this.handleToggle.emit（this.isOpen）；
this.toggleIcon（this.isOpen）；
}
}

plus.component.html

<app-accordion>
</app-accordion>

<div
*ngFor="let person of people"
class="accordion noHighlight"
[ngClass]="currentClass">
  <app-accordion-header
  (handleExpansion)="handleExpansion($event)"  
  [person]="person">
  </app-accordion-header>
</div>

<div> 
  <div>
    <div>
        <app-plus (handleToggle)="handleToggle($event)"></app-plus>
    </div>
    <div>
      <span>{{person.name}}</span>
    </div>
    <div>
      <span>{{person.age}}</span>
    </div>
    <div>
      <span>{{person.description}}</span>
    </div>
  </div>    
</div> 

<div (click)="toggleExpansion()">
  <svg>
      <g fill="#000000">
        <rect 
        id="plusicon-vertbar"
        class="plusicon-vertbar"
        [ngClass]="icon"
        x="8" 
        y="0" 
        width="4"
        height="20">
        </rect>
        <rect 
        id="plusicon-horizbar"
        transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000)"
        x="8" 
        y="0" 
        width="4"
        height="20">
        </rect>
      </g>
    </g>
  </svg>
</div>

---

您有一个组件和一个类控制手风琴段的打开状态。但是在模板中，有几个手风琴片段绑定到同一个类变量。 为了实现您想要的，您必须为每个手风琴段创建一个组件，定义它自己的状态变量。就像PlusComponent一样。 最简单的方法是将收割台主体和按钮嵌入一个可扩展组件中。毕竟，应该是这样的：

<accordion-segment *ngFor="let person of people" [person]="person"></accordion-segment>

---

打开某个段时，您只需处理关闭其他段。但是控制一个段打开状态的变量在一个唯一的段组件中。

你能给我提供一个更深入的例子吗？@FakeEmpire编辑了我的文章，提供了更多细节