упростить условные выражения ngClass, использующие ngFor

Question

У меня есть массив с 5 строковыми значениями: возбужденный, счастливый, нейтральный, грустный, злой

Я использую ngClass и ngFor, чтобы упростить HTML, и поэтому мне не нужно повторять все 5 раз для каждогоvalue.

Проблема в том, что оператор ngClass очень громоздкий, и я не могу найти подходящий способ его упростить.Есть ли способ сделать это короче?

<mat-icon *ngFor="let smiley of smileys" svgIcon="emote_{{smiley}}" 
                [ngClass]="{ happy: smiley === 'happy', sad:  smiley === 'sad', neutral:  smiley === 'neutral', angry:  smiley === 'angry', excited:  smiley === 'excited'}" (click)="selected(smiley, $event)"></mat-icon>

Заранее спасибо!

Answer 1

Вы можете просто написать

[ngClass]="smiley"

Answer 2

Поместите эту часть в функцию «счастливый»: smiley === «счастливый», sad: smiley === «sad», нейтральный: smiley === «нейтральный», angry: smiley === «angry», возбужденный: smiley === 'excited', может быть, переключатель или if и возвращают оттуда имя класса css.

Тогда вы можете написать: [ngClass]="determineHappiness()

Возник вопросрешить что-то похожее: проверить это

Answer 3

сделать содержимое массива smileys более умным, инкапсулировать конкретный класс внутри смайлика и использовать его в присваивании для разрешения класса.