在ngClass的条件实现中使用变量

Question

我开发了一个Angular 2应用程序，我尝试使用ngClass来应用CSS类。我已将类名存储在变量className中，并尝试使用以下代码来应用：

1. 第一种方式

   [ngClass]={'{{className}}': expression}
   

2. 第二种方式

   [ngClass]= {className: expression}
   

但他们都没有工作。

Answer 1

<强>更新

[ngClass]="expression ? cssClass : null"

或只是

[ngClass]="cssClass"

Plunker example

原创（仅适用于Dart）

[ngClass]= {className: expression}

expression返回true

时，

会正常工作

Answer 2

不应在模板中设置条件，而应将其绑定到变量或函数，并在控制器中返回类的Object。

模板

<!-- From a getter -->
[ngClass]="myClass"

<!-- From a function -->
[ngClass]="myClass(someCondition)"

控制器

// As a getter
get myClass(): any {

    return {
        someClass: someTruthyCondition
    }
}

// From a function
myClass(someCondition): any {

    return {
         someClass: someCondition === true
    }
}

Answer 3

你应该使用这样的插值：

<div  class="{{expression?className:null}}" ></div>

这是一个例子：

<div  class="{{something===anotherThing?className:null}}" ></div>

Answer 4

尝试以下适合我的代码。

在变量中分配类：

class1: string = "class1";
class2: string = "class2";

<强>样式：

<style>
.class2 {
    height:50px;
    background-color:red;
    color:white;
    width:100px;            
}
 .class1 {
    height:50px;
    background-color:blue;
    color:white;
    width:100px;
}
</style>

<强> HTML：

<div [ngClass]="1==1?class1:class2">
    Test Class
</div>

开发工具代码：

<强>输出：

Answer 5

使用此

[ngClass]= {'className': expression}

而expression是你的条件

和className是你的css类名。

PS： -

1. 错误此[ngClass]={'{{className}}': expression} 因为你不能在属性绑定中使用{{}}语法，就像在这种情况下那样