通过NgClass指令使用属性

Question

我正在尝试做似乎很简单的事情，但是我找不到方法，而且似乎不在文档中。这是一个简单的示例：

<div *ngFor="let card of cards | async">
    <div [ngClass]="{card.color : true}">
    </div>
</div>

我可以做[ngClass]="[card.color]"或[ngClass]="{'red' : true}"

但是，一旦我尝试将两者结合起来，就会出现以下错误：Parser Error: Missing expected : at column 6 in [{card.color: true}]

有人有什么想法吗？谢谢

Answer 1

根据https://angular.io/docs/ts/latest/guide/template-syntax.html

directiveName-是结构指令的简写形式，其中长形式只能应用于标记。简短形式将元素隐式包装在..p中的位置。

[prop] =“ value”用于将对象绑定到属性（Angular组件或指令的@Input（）或DOM元素的属性）。

在使用[ngClass]时，可以绑定到的是表达式，在这种情况下，通常使用条件运算符

这是示例：

var c = ((a < b) ? 'minor' : 'major');

如果值为true，则c变量将为minor，如果值为false，则c变量将为major。

Answer 2

您可以使用

 ngClass={{card.color}}

Answer 3

您可以使用以下语法有条件地设置card.color给定的类：

[ngClass]="{card.color: condition}"