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

【问题标题】：Using variable in conditional implementation of ngClass在 ngClass 的条件实现中使用变量
【发布时间】：2017-05-13 17:51:29
【问题描述】：

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

第一种方式

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

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

但他们都没有工作。

【问题讨论】：

什么是expression？需要返回true
How to use a dynamic value with ngClass的可能重复
哦，不，那是 Angular 1，抱歉；问题的 Angular 2 版本是 stackoverflow.com/q/37090877/3001761
@K.Daniek 我正在尝试使用“@Input”创建一个接受类名的自定义元素。
@JayakrishnanGounder，伙计，您应该接受以下其中一项，否则人们只需复制粘贴我们的答案并再次回答：D:D:D:D:

标签： angular angular2-template angular2-components

【解决方案1】：

你应该像这样使用插值：

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

这是一个例子：

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

【讨论】：

这在 Safari 移动 AFAIK 上不起作用，因此不鼓励绑定到 class。
@GünterZöchbauer，哦，真可惜，你知道为什么吗？
浏览器错误。 . . ... .
@GünterZöchbauer，有没有提出任何问题，或者这是否记录在某处？我们怎么知道的？
感谢您的检查。也许从那以后它在浏览器中得到了修复，或者 polyfill 得到了改进。

【解决方案2】：

更新

[ngClass]="expression ? cssClass : null"

或者只是

[ngClass]="cssClass"

Plunker example

原创（仅适用于 Dart）

[ngClass]= {className: expression}

当expression 返回true 时会正常工作

【讨论】：

我认为className在这里应该是可变的，这就是问题
我刚刚检查过了。这仅适用于 Dart，但不适用于 JS。
为什么它仍然有效？如果我的 className 是填充或什么？这不应该工作
我不明白你的评论。他们实现它就像对象文字在 TS 和 Dart 中的工作一样。实际上在 Dart 中它不是一个对象字面量，而是一个 Map。 TS 只能有字符串作为属性名，但 Dart 可以有任何值作为映射键。
[ngClass]="expression ? cssClass : null" 为我工作！

【解决方案3】：

试试下面对我有用的代码。

在变量中赋值：

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>

开发工具代码：

输出：

【讨论】：

【解决方案4】：

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

模板

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

【讨论】：

模板中的函数调用是不好的做法