我想要将两个值传递给ngClass。
您可以这样做:
您可以这样做:
[ngClass]="'cssprefix-' + var.value, {'newclass' : ifTrue}"
// 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}"
编辑新答案:
在我的旧回答中,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中对象表达式的属性侧面出现“+”或“(”。
[ngClass]
接收一个对象并解析其样式。 因此,您的两个值将作为以下对象中的属性传递,并在左侧显示相应的类。
[ngClass]="{'cssprefix-' + var.value: ! ifTrue, 'newclass' : ifTrue}"
更多信息:
您还可以在[ngClass]
内执行逻辑运算符和其他条件
[ngClass]="{'someCondClass': ifTrue && (somethingElse || anotherCondition)}"
[ngClass]
的使用方式是这样的。 - Aniruddha Das