Angular2 ngClass：如何有条件地选择 class？

Question

我在 Angular 中有以下代码 2. 我希望只有一个 div 元素会根据 [=] 的值获得 class 样式 'chosen' 18=]。写完这段代码后，我发现所有 div 元素都得到了 class "chosen"，即使 'service.mode' 等于 'slots'.

<header>
  <div [ngClass] = "{'chosen': 'service.mode == \'featured\''}"> Featured Games</div>
  <div [ngClass] = "{'chosen': 'service.mode == \'slots\''}"> Slot Games </div>
  <div [ngClass] = "{'chosen': 'service.mode == \'card\''}"> Card Games </div>
  <div [ngClass] = "{'chosen': 'service.mode == \'table\''}"> Table Games </div>
</header>

你知道可能是什么问题吗？

Answer 1

正确的语法是：

<header>
    <div [ngClass] = "{'chosen': service.mode == 'featured'}"> Featured Games</div>
    <div [ngClass] = "{'chosen': service.mode == 'slots'}"> Slot Games </div>
    <div [ngClass] = "{'chosen': service.mode == 'card'}"> Card Games </div>
    <div [ngClass] = "{'chosen': service.mode == 'table'}"> Table Games </div>
</header>

不知道你为什么使用\，如果你想比较service.mode和featured\，请在''中使用它。

Angular2 ngClass：如何有条件地选择 class？

Angular2 ngClass: How to choose a class conditionally?

angular2-directives

angular2-template

angular