角2动态CSS类

Question

HTML：

<div *ngFor="let record of lift" class="list-lifts" [class.showLifts]="isBtnActive"> 

组件：

isBtnActive: boolean = false; 

toggleClass() { 
    this.isBtnActive = !this.isBtnActive; 
    } 

CSS：

.list-lifts { 

    &:not(:first-of-type) { 
    margin-top: -11px !important; 
    display: none; 
    } 
} 

.showLifts { 
    display: block !important; 
} 

// I need something like this to be built in the view: 
.ValueshowLifts {} 

的toggleClass()功能切换按钮上的点击的CSS类.showLifts。这很好。

问题是，我需要类.showLifts有一个动态名称，我不知道生成它的语法是什么。出于合乎逻辑的原因，这里有一个例子：

[class.{{ record.name }}showLifts]="isBtnActive" 

但当然这是不合法的语法。

Answer 1

正如其他人所说，你可以使用[ngClass。答案是张贴在这里：

Dynamic classname inside ngClass in angular 2

但我想提一提，如果你使用CSS来只显示或隐藏的元素，然后代替你可以使用* ngIf或[隐藏]，这取决于如果你想DOM中的元素还是不是。

Answer 2

您可以利用此

[ngClass]="showLiftsClass" 

ngClass指令里面的代码，你可以CSS类动态地添加到它，如下所示，

showLiftsClass = { 
     'record1showLifts' : true, 
     'record2showLifts' : false, 
     'record3showLifts' : false, 
     'record4showLifts' : false 
     ... 
} 

你可以有一个或多个类别的真正 。值true会将该类添加到DOM元素。

Answer 3

试试这个：

<div *ngFor="let record of lift; ; let i=index" class="list-lifts" 
[ngClass]="{'showLifts': isBtnActive}"> 

或者您可以使用：* ngIf

*ngIf="expression" (e.g. *ngIf="i!=0" or *ngIf="i==0") 

Answer 4

<div class="form-group label-floating" [ngClass]="{'is-empty': true, 'second-class' : true}"></div>