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 в моем компоненте, и я хочу применить этот дополнительный класс отмеченных значков, только когда эта переменная имеет значение true. Но мои условные заявления не работают.

Что я делаю неправильно?

PS: я пытался следовать

<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>