angular2 mdl 将 css 类动态应用于材质图标答案

【问题标题】：angular2 mdl apply css class dynamically to material iconangular2 mdl 将 css 类动态应用于材质图标
【发布时间】：2018-01-02 04:28:28
【问题描述】：

我正在尝试将 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

【问题讨论】：

【解决方案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>

【讨论】：