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

Question

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

第一种方式

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

第二种方式
```
[ngClass]= {className: expression}
```

但是他们都没有用。

Answer 1

你应该像这样使用插值：

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

这是一个例子：

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

Answer 2

更新

[ngClass]="expression ? cssClass : null"

或者只是

[ngClass]="cssClass"

Plunker example

原始（仅适用于 Dart）

[ngClass]= {className: expression}

将在 expression returns true

时正常工作

Answer 3

试试下面适合我的代码。

在变量中赋值class：

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 4

与其在模板中设置条件，不如将其绑定到变量或函数，并 return 控制器中 class 的对象。

模板

<!-- 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
    }
}

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

Using variable in conditional implementation of ngClass

angular2-template

angular2-components

angular