简化使用ngFor的ngClass条件

Question

我有一个包含5个字符串值的数组 兴奋，快乐，中立，悲伤，愤怒

我使用ngClass和ngFor来简化html，因此不必为每个值重复5倍。

问题在于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

使smileys数组的内容更智能，将具体的类封装在smiley中，并在分配给类resolve时使用。

Answer 3

将此部分放入函数中：快乐：笑脸==='快乐'，悲伤：笑脸==='悲伤'，中立：笑脸==='中性'，生气：笑脸==='生气'，兴奋：smiley ==='excited'，也许是一个开关或if子句，然后从那里返回css-class-name。

然后您可以编写： [ngClass]="determineHappiness()

有一个类似的问题可以解决：check this one out