Angular 4+ ngClass混合表达式

Question

我想要将两个值传递给ngClass。

您可以这样做：

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

- RooksStrife

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

- Martin Adámek

Answer 2

编辑新答案：
在我的旧回答中，ngClass将 "as c" "c" 直接解释为 css 类名 "c"。不过这似乎也能正常工作。

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

这是我能让它工作的唯一方法，因为解析器不喜欢在ngClass中对象表达式的属性侧面出现“+”或“（”。

- William Lohan

Answer 3

[ngClass] 接收一个对象并解析其样式。 因此，您的两个值将作为以下对象中的属性传递，并在左侧显示相应的类。

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

更多信息： 您还可以在[ngClass]内执行逻辑运算符和其他条件

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

- Aniruddha Das

---

这假设提问者想要其中之一。 - tcmoore

@Aniruddha Das不起作用 - 您会收到一个错误，它期望在fix-之后得到一个： - RooksStrife

“：after” 是一个伪类，我认为。你能说一下你想要实现什么吗？通常 [ngClass] 的使用方式是这样的。 - Aniruddha Das

@AniruddhaDas，RooksStrife指的是语法错误信息，而不是sudo类。 - William Lohan

顺便提一下，它被称为伪选择器 :) - Martin Adámek