使用带有 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

你可以使用

 ngClass={{card.color}}

Answer 2

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

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

Answer 3

directiveName - 是结构指令的 shorthand 形式，其中长形式只能应用于标签。短格式隐式地将元素包装在 .

中应用的位置

[prop]="value" 用于对象绑定到属性（Angular 组件或指令的 @Input() 或 DOM 元素的属性 ).

当你使用 [ngClass] 时，你可以绑定到它的是一个 表达式 ，在这些情况下，常见的事情是使用 条件运算符

示例如下：

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

如果值为真，c 变量将为 minor，如果值为假，则为 major。

Using properties with NgClass directive