angular2 mdl动态地将css类应用于材料图标。

Question

我试图将css类应用于材料图标，如下所示：

<i ngClass="{task.isDone ? 'checked-icon material-icons' : 'material-icons'}">check_circle</i>

在没有条件的情况下，它应该是这样的(这是有效的)：

<i class="checked-icon material-icons">check_circle</i>

我的组件中有一个变量isDone，只有当该变量为真时，我才想应用这个额外的选中图标类。但我的条件陈述不起作用。

我做错了什么？

P.S.:我试过

<i ngClass="{task.isDone ? checked-icon material-icons : material-icons}">check_circle</i>

但是它将这个额外的类应用于每个元素，而不管值为false。

Answer 1

试着像这样

[ngClass]="{'className1': task.isDone, 'className2': !task.isDone }"

如果您希望普通使用material-icons类，则使用普通class="material-icons"。

在你的情况下

<i class="material-icons" [ngClass]="{'checked-icon':task.isDone}">check_circle</i>