单击时在两个 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

使用 id 来帮助您。像这样：

<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;
 }

}