Angular 4+ ngClass混合表达式

我想将2个值传递给ngClass。Angular 4+ ngClass混合表达式

你如何做到这一点：

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

来源

2017-10-20 RooksStrife

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

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

来源

2017-10-20 15:22:09

-1

[ngClass]需要一个对象，解析它的风格。所以，你的两个值，如下一个对象，对应的类在左

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

多一点信息内部传递：你也可以执行逻辑运算符和其他条件内[ngClass]

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

来源

2017-10-20 15:10:34

在ngClass对象表达的物业方，这使得假设的唯一途径提问者想要一个或另一个 – tcmoore

@Aniruddha Das不工作 - 你得到一个错误，它期望：在修复后'' – RooksStrife

'：after'是一个sudo类，我想你能提一下你在尝试什么通常'[ngClass]'以这种方式工作 –

编辑新建答案：
在我以前的答案ngClass正在采取 “为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>

这是我能得到它监守解析器的工作不喜欢“+”或“（”关于

来源

2017-10-20 15:51:55

Angular 4+ ngClass混合表达式

回答

相关问题