アクティブクラスonclickをngFor角度2に与える

Question

こんにちは私はリストを並べ替えていないし、それらのすべてがアクティブなクラスを持っています。どのリスト項目にでもクリックすると、アクティブなクラスを切り替える必要があります。私のコードは次のようなものです

<ul class="sub_modules"> 
    <li *ngFor="let subModule of subModules" class="active"> 
    <a>{{ subModule.name }}</a> 
    </li> 
</ul> 

誰でも私にこれをやってもらえますか？

Answer 1

あなたが何かを行うことができます：呉クラスのコンポーネント

activateClass(subModule){ 
    subModule.active = !subModule.active;  
} 

で

<ul class="sub_modules"> 
    <li (click)="activateClass(subModule)" 
     *ngFor="let subModule of subModules" 
     [ngClass]="{'active': subModule.active}"> 
    <a>{{ subModule.name }}</a> 
    </li> 
</ul> 

は、最初のプロパティを追加したいと第二の条件であるクラスです。

Answer 2

私はあなたがここにあなたの答えを見つけることができると信じて：AngularJs - Best-Practices on adding an active class on click (ng-repeat)

あなたがターゲットと角の$indexを通じてアイテム/オブジェクトにCSSを適用することができます。ポストは私ができるよりも論理を説明し、実証します。

Answer 3

インデックスプロパティを作成するだけです。 let i = indexを使用して（クリック）イベントを使用してインデックスを設定します。ただ設定のselectedIndex：真

<ul class="sub_modules"> 
    <li *ngFor="let subModule of subModules; let i = index" 
     [class.active]="selectedIndex === i" 
     (click)="setIndex(i)"> 
    <a>{{ subModule.name }}</a> 
    </li> 
</ul> 

に「アクティブ」はいセットクラスであればselectedIndex === i場合、typescriptですファイルを次にチェック。

export class ClassName { 
    sIndex: number = null; 

    setIndex(index: number) { 
     sIndex = index; 
    } 
}