如何动态添加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] 
}