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

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

}

Answer 2

我在这里创建了一个堆栈闪电：https://stackblitz.com/edit/angular-wc4dda，它可以满足您的需要，但是您将不得不向列表中添加其他数据。如果单击示例中的项目，则会通过交换打开和关闭的类来隐藏列表项中的内容。

单击时在两个ngClass类之间切换，但仅适用于单击的元素

2 个答案: