简化使用 ngFor 的 ngClass 条件答案

【问题标题】：simplify ngClass conditionals that uses ngFor简化使用 ngFor 的 ngClass 条件
【发布时间】：2019-02-07 07:57:23
【问题描述】：

我有一个包含 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>

提前谢谢你！

【问题讨论】：

你可以在.ts文件中定义它们。
你的类名总是等于smiley的值吗？
@molamk 他们是，是的

标签： angular typescript ngfor ng-class

【解决方案1】：

你可以简单地写

[ngClass]="smiley"

【讨论】：

简单高效！
哇是的，这确实有效！我以为我以前尝试过，但我做了 {{smiley}}，但没有用。谢谢！
为了更清楚，在模板中使用“[ ]”定义您使用变量名而不是值，因此 [ngClass]="smiley" 等于 ngClass="{{smiley}} "
非常好，还可以添加多个表情符号。通过使用[ngClass]="[smiley1, smiley2]" 在此之后我还注意到它可以通过制作smiley = ['happy', 'sad', 'neutral'] aka smiley.push('happy') 并保留[ngClass]="smiley" 来解除限制。

【解决方案2】：

使笑脸数组内容更智能，将具体的类封装在笑脸内部，并在分配给类解析时使用它。

【讨论】：

【解决方案3】：

把这部分放到一个函数中快乐：笑脸==='快乐'，悲伤：笑脸==='悲伤'，中性：笑脸==='中性'，愤怒：笑脸==='愤怒'，兴奋: 笑脸 === 'excited'，可能是一个 switch 或 if 子句并从那里返回 css-class-name。

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

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

【讨论】：