angular2 mdl 将 css class 动态应用到 material 图标

Question

我正在尝试将 css class 应用到 material 图标，如下所示：

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

没有条件它看起来像这样（有效）：

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

我的组件中有一个变量 isDone，我想仅在该变量为 true 时应用这个额外的选中图标 class。但是我的条件语句不起作用。

我做错了什么？

P.S.: 我试着关注

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

但是它将这个额外的 class 应用到每个元素而不考虑值 false

Answer 1

这样试试

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

如果你想material-icons class 普通使用 class="material-icons" 沿

你的情况

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