简化使用 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

使笑脸数组内容更智能，将具体的 class 封装在笑脸中，并将其用于赋值给 class 解析。

Answer 2

你可以简单地写

[ngClass]="smiley"

Answer 3

把这部分放到一个函数中 happy: smiley === 'happy', sad: smiley === 'sad', neutral: smiley === 'neutral', angry: smiley === 'angry'，兴奋：笑脸 === 'excited'，可能是一个开关或 if 子句和 return css-class-name 从那里。

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

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

简化使用 ngFor 的 ngClass 条件

simplify ngClass conditionals that uses ngFor

typescript

ng-class

ngfor

angular