如何切换仅当前元素的class angular2 [英] How to toggle class only current element angular2

问题描述

这是我的代码示例. 在我的情况下，切换类适用于每个li元素

here is my code examples. In my case toggle class works for every li element

   <ul class="nav nav-pills pull-right">
        <li *ngFor="let x of nav" class="presentation" (click)="active = !active" [ngClass]="toggleClass()">
            <a href="#">{{x.menu}} </a>
        </li>
    </ul>

js

 export class AppComponent {
  active = false;
  nav = NAVIGATION;

  //Toggle Class

  toggleClass(){
    if(this.active){
      return 'active';
    } else {
      return '';
    }
  }

推荐答案

使用以下代码，您无需编写打字稿代码，

With following code, you don't need to write typescript code,

<ul class="nav nav-pills pull-right">
        <li *ngFor="let x of nav;let i=index" 
             class="presentation" 
             (click)="isClicked=i"             
             [class.active]="isClicked==i">    
             <a href="#">{{x.menu}}</a>
        </li>
</ul>

这篇关于如何切换仅当前元素的class angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！