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混合表達式

回答

相關問題