如何動態添加css類到某個元素？

Question

假設我有一個對象列表，我想更改某個對象樣式。我正在利用ngClass和點擊事件來切換CSS類。

<ul class="container"> 
    <li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible">1</li> 
    <li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible;">2</li> 
    <li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible;">3</li> 
    <li class="item" [ngClass]="{'active': isClassVisible }" (click)="isClassVisible = !isClassVisible;">4</li> 
</ul> 

然後在組件我有

export class MyComponent { 
    isClassVisible: false; 
} 

和CSS

.active { 
    background: black; 
} 

這種方法

然而，當我點擊內部列表中的元素上，CSS類適用於所有的他們，但不是我點擊的元素。

Answer 1

何不做一個指令來處理它

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core'; 
@Directive({ selector: '[myActive]' }) 
export class ActiveDirective { 

    private _isActive = false; 

    constructor(private el: ElementRef, private renderer: Renderer) { 

    } 

    @HostListener('click', ['$event']) 
    onClick(e) { 
     e.preventDefault(); 
     this._isActive = !this._isActive; 
     this.renderer.setElementClass(this.el.nativeElement, 'active', this._isActive); 
    } 
} 

然後使用它像這樣

<ul class="container"> 
    <li class="item" myActive>1</li> 
    <li class="item" myActive>2</li> 
</ul> 

Answer 2

因爲您在所有li's中使用相同的變量，並且當您單擊其中一種樣式應用於所有這些變量時。

嘗試使用差異差異變量對每個L1

或使用這樣

<ul class="container"> 
    <li *ngFor = 'let n of num' class="item" [ngClass]="{'active': selectedLi == n }" (click)="selectedLi = n">{{n}}</li> 
</ul> 

export class MyComponent { 
    isClassVisible: false; 
    num = [1,2,3,4,5] 
}