Все аккордеонные панели открываются одновременно?

Question

Я пытаюсь создать аккордеон с нуля в Angular.

У меня есть функциональность открытия и закрытия одной панели, однако, когда я представляю более одной панели, я обнаруживаю, что все они открываются одновременно.

Что-то мне не хватает?

Вот стек для игры с

component.ts

export class AppComponent  {
  collapsed = true;

  toggle(el) {
    this.collapsed = !this.collapsed;
  }
}

component.html

<div class="header"
  [ngClass]="{'upArr open': !collapsed, 'downArr': collapsed}" 
  (click)="toggle(this)">
    title
</div>
<div class="body" [ngClass]="{'collapsed': collapsed}">
  data
</div>

<div class="header"
  [ngClass]="{'upArr open': !collapsed, 'downArr': collapsed}" 
  (click)="toggle(this)">
    title
</div>
<div class="body" [ngClass]="{'collapsed': collapsed}">
  data
</div>

component.css

.header {
  background: #CB1C6F;
  cursor: pointer;
  width: 100%;
  font-size: 2em;
  color: white;
}

.header:hover {
  background: #7F045D;
}

.upArr::after {
  float: right;
  content: '\25b2';
}

.downArr::after {
  float: right;
  content: '\25bc';
}

.body {
  background: lightblue;
  overflow: hidden;
  width: 100%;
}

.collapsed {
  height: 0px;
}

.open {
  background: #00A1CC
}

.open:hover {
  background: #005DA1
}

Answer 1

Пожалуйста, замените этот код на ваш код.

export class AppComponent  {
  public accordions = [
    {
      title: 'head1',
      data: 'content 1 ',
      collapsed: false
    },
    {
      title: 'head2',
      data: 'content 2',
      collapsed: true
    }
  ]

  toggle(el) {
    this.accordions[el].collapsed = !this.accordions[el].collapsed;
  }
}


<div *ngFor="let accordion of accordions; let i = index">
    <div class="header" [ngClass]="{'upArr open': !accordion.collapsed, 'downArr': collapsed}" 
      (click)="toggle(i)">
        {{accordion.title}}
    </div>
    <div class="body" [ngClass]="accordions[i].collapsed? 'collapsed' : ''">
      {{accordion.data}}
    </div>
</div>

Answer 2

Все они разрушаются (или не разрушаются) в зависимости от переменной collapsed.

Я бы рассмотрел создание различных аккордеонов с циклом *ngFor следующим образом:

component.ts

export class AppComponent  {
  public accordions = [
{
title: 'Some title',
data: 'Some data',
collapsed: true
},
{
title: 'Some title2',
data: 'Some data2',
collapsed: true
}
]

  toggle(el) {
    this.accordions[el].collapsed = !this.accordions[el].collapsed;
  }
}

component.html

<div *ngFor="let accordion of accordions; let i = index">
    <div class="header"
      [ngClass]="{'upArr open': !accordion.collapsed, 'downArr': collapsed}" 
      (click)="toggle(i)">
        {accordion.title}
    </div>
    <div class="body" [ngClass]="accordions[i].collapsed? 'colapsed' : ''">
      {accordion.data}
    </div>
</div>