简化ngClass条件语句使用ngFor

Question

我有5个字符串值的数组兴奋，高兴，中性，悲伤，愤怒

我使用ngClass和ngFor以简化HTML，所以我不必重复一切5X每个值。

问题是，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

使表情阵列的内容更聪明，封装笑脸混凝土内部类，并使用它分配给类的决心。

Answer 3

将这个部分为功能快乐：笑脸===“快乐”，伤心：笑脸===“悲伤”，中性：笑脸===“中性”，生气：笑脸===“生气”，兴奋的道：笑脸= ==“兴奋”，也许一个开关或if语句，并从那里返回的CSS类名。

然后，你可以写：[ngClass]="determineHappiness()

有解决类似问题：check this one out