Переключение между двумя классами ngClass по клику, но только для кликаемого элемента

Question

У меня есть список элементов, сгенерированных с помощью цикла *ngFor. Я хочу, чтобы эти элементы переключались между двумя классами при нажатии, но, очевидно, я хочу, чтобы только нажатый элемент переключал класс.

HTML:

<div class="closed" (click)="clickEvent($event)" [ngClass]="{'open': toggle}"></div>

component.ts:

clickEvent(event) {
    private toggle : boolean = false;
    clickEvent(event) {
      this.toggle != this.toggle;
    }
  }

При вышеуказанной настройке применяется начальный класс (.closed), но когда я щелкаю элемент, класс .open не применяется, и повторное нажатие на элемент не отображает .closed класс.

Answer 1

Я создал стек стека здесь: https://stackblitz.com/edit/angular-wc4dda, он делает то, что вам нужно, но вам нужно будет добавить дополнительные данные в список. Если щелкнуть элементы в примере, он скрывает содержимое элемента списка, меняя местами открытые и закрытые классы.

Answer 2

Используйте идентификатор, чтобы помочь вам. Как это:

<div class="closed" onClick="change()" id="btn"></div>

(JavaScript)

var change = false;
function change(){
  if(!change){
    document.getElementById("btn").className = "open";
    change = true;    
 }else{
    document.getElementyById("btn").className = "closed";
    change = false;
 }

}