Question

我正在尝试将2个值传递给ngClass。

你是怎么做到的：

[ngClass]="'cssprefix-' + var.value, {'newclass' : ifTrue}"

Answer 1

您可以移动描述要添加到控制器方法的类的逻辑：

// controller
getClasses(ifTrue: boolean, value: string) {
    const ret = {};
    ret['cssprefix-' + value] = true;
    ret['newclass'] = ifTrue;

    return ret;
} 

// in template
[ngClass]="getClasses(ifTrue, var.value)"

您也可以直接绑定到class属性：

[class]="'cssprefix-' + var.value" [ngClass]="{'newclass' : ifTrue}"

或者使用字符串插值：

class="{{ 'cssprefix-' + var.value }}" [ngClass]="{'newclass' : ifTrue}"

Answer 2

编辑新答案：
在我的老答案中，ngClass将＆＃34;作为c＆＃34; ＆＃34; C＆＃34;字面意思是css类＆＃34; c＆＃34;。这似乎工作。

<div [class]="'csspefix-' + cssSuffix.value" [ngClass]="{ 'newclass' : ifTrue}"></div>

旧答案：
在我的示例中，我将var重命名为cssSuffix，因为解析器不喜欢var关键字。

<div *ngIf="'csspefix-' + cssSuffix.value as c" [ngClass]="{ c: true, 'newclass' : ifTrue}"></div>

这是我能让它工作的唯一方法，因为解析器并不喜欢＆＃34; +＆＃34;或＆＃34;（＆＃34;在ngClass中对象表达式的属性一侧。

Answer 3

[ngClass]获取一个对象并解析它的样式。因此，您的两个值将在下面的对象内传递，并在左侧

中传递相应的类

[ngClass]="{'cssprefix-' + var.value: ! ifTrue, 'newclass' : ifTrue}"

更多信息：您还可以在[ngClass]

中执行逻辑运算符和其他条件

[ngClass]="{'someCondClass': ifTrue && (somethingElse || anotherCondition)}"

Angular 4+ ngClass Mix表达式

3 个答案: