現在の要素angle2のみを切り替える方法

Question

ここは私のコード例です。

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

しかしとして見て：私の場合トグルクラスで はあなたのNAVインタフェース/クラスにactiveプロパティを追加する必要があり、すべてのli要素

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

Answer 1

、あなたはtypescriptですコードを記述する必要はありません、

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

Answer 2

のために働きますあなたがナビゲーション項目を選択しようとしているとすれば、あなたはただ一つを選択したいと思うでしょう。任意の

Answer 3

は商品ごとにアクティブな変数を格納する必要があります/

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

をコンポーネントでは、あなたのNAVアイテムのクラス/インタフェースにbooleanからあなたactive宣言を変更する必要があります：あなたはこのような何かにあなたのテンプレートを変更する必要があります、すべての李さんと全体のコンポーネントではない：

<li *ngFor="let x of nav" (click)="x.active = !x.active" ... > 

あなたはアクティブなクラスを表示するには、テンプレートに次のコードを使用することができます。

次のコードで

[class.active]="x.active" 

Answer 4

あなたはディレクティブを作り、

例

import { Directive, ElementRef, HostBinding } from '@angular/core'; 

@Directive({ 
    selector: '[my-directive]' 
}) 

export class MyDirective { 
    @HostBinding('class.active') isActive = false; 

    toggle() { 
     this.isActive = !this.isActive; 
    } 

} 

次のように使用し@HostBinding使用することができます：

<li [my-directive] (click)="toggle()">blah</li> 

Answer 5

あなたは

export class MyDirective { 
@HostBinding('class.active') isActive = false; 

@HostListener('click', ['$event']) 
onClick(e) { 
    this.isActive = !this.isActive; 
} 
} 

純粋であることを指示するためにHostListenerを使うとHTMLを使用することができます

<li [my-directive]>blah</li>