Угловое при нажатии на событие для нескольких элементов

Question

Что я пытаюсь сделать:

Я пытаюсь разместить на странице складные элементы стиля аккордеона, которые будут разворачиваться и сворачиваться при щелчке. Они будут расширяться при добавлении определенного класса collapsible-panel--expanded.

Как я пытаюсь этого добиться:

Для каждого из элементов, которые я установил, событие щелчка выглядит так:

<div (click)="toggleClass()" [class.collapsible-panel--expanded]="expanded" class="collapsible-panel" *ngFor="let category of categories">
    ....
</div>
<div (click)="toggleClass()" [class.collapsible-panel--expanded]="expanded" class="collapsible-panel" *ngFor="let category of categories">
    ....
</div>

и в функции toggleClass() у меня есть следующее:

expanded = false;
toggleClass() {
    this.expanded = !this.expanded;
    console.log(this.expanded)

}

Проблема, с которой я сталкиваюсь:

Когда у меня есть несколько из них на одной странице, и я нажимаю одну, все они, кажется, расширяются.

Я не видел, чтобы заставить его расширяться.

Edit:

Количество разборных ссылок будет динамическим и будет меняться по мере их создания и извлечения из базы данных. Это может быть одна ссылка сегодня, но 30 завтра и т.д.

Редактировать 2:

Хорошо, значит полный код для обработчика кликов выглядит так:

toggleClass(event) {
    event.stopPropagation();
    const className = 'collapsible-panel--expanded';
    if (event.target.classList.contains(className)) {
        event.target.classList.remove(className);
        console.log("contains class, remove it")
    } else {
        event.target.classList.add(className);
        console.log("Does not contain class, add it")
    }

}

и код в HTML выглядит так:

<div (click)="toggleClass($event)" class="collapsible-panel" *ngFor="let category of categories" >
  <h3 class="collapsible-panel__title">{{ category }}</h3>
  <ul class="button-list button-list--small collapsible-panel__content">
      <div *ngFor="let resource of resources | resInCat : category">
          <a href="{{ resource.fields.resource.fields.file.url }}" target="_blank" class="button-list__inner no-decoration doc"><span class="underline display-block margin-bottom">{{ resource.fields.title }}</span><span class="secondary" *ngIf="resource.fields.description display-block">{{ resource.fields.description }}</span></a>
      </div>
  </ul>
</div>

Answer 1

Try to pass unique Id. (little modification)Ex: -

in component.ts file: 
selectedFeature: any;
categories:any[] = [
        {
          id: "collapseOne",
          heading_id: "headingOne",
        },
        {
          id: "collapseTwo",
          heading_id: "headingTwo",
        },
        {
          id: "collapseThree",
          heading_id: "headingThree",
        }
];

toggleClass(category) {
this.selectedFeature = category;
};

ngOnInit() {
this.selectedFeature = categories[0]
  }

in html:-

<div class="collapsible-panel" *ngFor="let category of categories">
<!-- here you can check the condition and use it:-
ex:
<h4 class="heading" [ngClass]="{'active': selectedFeature.id==category.id}" (click)="toggleClass(category)">
<p class="your choice" *ngIf="selectedFeature.id==category.id" innerHtml={{category.heading}}></p>

   enter code here

 -->
.....
</div>

Answer 2

вы можете применить свой класс через javascript

<div (click)="handleClick($event)">
    some content
</div>

, затем ваш обработчик

handleClick(event) {
    const className = 'collapsible-panel--expanded';
    if (event.target.classList.contains(className)) {
        event.target.classList.remove(className);
    } else {
        event.target.classList.add(className);
    }
}

В простом html и js это можно сделать следующим образом

function handleClick(event) {
    const className = 'collapsible-panel--expanded';
    if (event.target.classList.contains(className)) {
        event.target.classList.remove(className);
    } else {
        event.target.classList.add(className);
    }
    console.log(event.target.classList.value);
}

<div onclick="handleClick(event)">
some content
</div>

Answer 3

Вы используете одно и то же свойство expanded для переключения для всех элементов div, поэтому при установке значения true для одного элемента div оно устанавливается равным true для всех элементов div.

Попробуйте установить разные свойства, например:

<div (click)="toggleClass("1")" [class.collapsible-panel--expanded]="expanded1" class="collapsible-panel" *ngFor="let category of categories">
    ....
</div>
<div (click)="toggleClass("2")" [class.collapsible-panel--expanded]="expanded2" class="collapsible-panel" *ngFor="let category of categories">
    ....
</div>

TS:

expanded1 = false;
expanded2 = false;

toggleClass(number:any) {
    this["expanded" + number]  = !this["expanded" + number];
    console.log(this["expanded" + number]) 
}

Answer 4

Попробуйте сохранить массив расширенных элементов.

expanded = []; // take array of boolean 
toggleClass(id: number) {
    this.expanded[i] = !this.expanded[i];
    console.log(this.expanded[i]);
}

Answer 5

Вашим решением будет использование шаблонных локальных переменных:

смотри это: https://stackoverflow.com/a/38582320/3634274