クリックされた要素のみのCSSクラスの切り替え

Question

2つのdiv要素の値は1と2です。各要素がクリックされるたびに、CSSクラスを切り替える必要があります。 このソリューションは、両方の（すべての）要素に対して常にcssクラスを切り替えます。

<div (click)="toggleClass()" [class.active]="isActive">1</div> 
<div (click)="toggleClass()" [class.active]="isActive">2</div> 

export class MyComponent{ 
    isActive = false; 
    constructor(){} 
    toggleClass() { 
    this.isActive = !this.isActive; 
    } 
} 

Answer 1

<div (click)="toggleClass(0)" [class.active]="isActive[0]">1</div> 
<div (click)="toggleClass(1)" [class.active]="isActive[1]">2</div> 

export class MyComponent{ 
    isActive = [false, false]; 
    constructor(){} 
    toggleClass(idx) { 
    this.isActive[idx] = !this.isActive[idx]; 
    } 
} 

あなたは異なる要素のために異なる状態が必要な場合は、その状態を保存するためのスペース（変数）を提供する必要があります。角は魔法ではありません;-)

<div (click)="toggleClass(0)" [class.active]="isActive === 0">1</div> 
<div (click)="toggleClass(1)" [class.active]="isActive === 1">2</div> 

export class MyComponent{ 
    isActive = -1; 
    constructor(){} 
    toggleClass(idx) { 
    this.isActive = idx; 
    } 
}