angular 9: ngFor 中 ngClass 的多个条件

Question

我在尝试使用 angular 在我的页面中打印典型的星级评级小部件时遇到了一些问题。可能会有一种更简单的方法来使用 css 来展示它们，但现在我想通过代码来完成。

<i *ngFor="let star of this.stars" [ngClass]="{
    'score__star fas fa-star': star === 'full',
    'score__star fas fa-star-half-alt': star === 'half', 
    'score__star far fa-star': star === 'empty'
    }"></i>

这是小部件的代码，这是星星数组的内容：

(5) ["full", "full", "half", "empty", "empty"]

我不确定为什么，chrome 正确绘制了前 2 个，但没有正确绘制其他的。从我在调试器中看到的情况来看，class 的某些部分被遗漏了...

<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class=""></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class=""></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class="fas fa-star-half-alt"></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class="score__star far fa-star"></i>
<i _ngcontent-lqd-c56="" ng-reflect-ng-class="[object Object]" class="score__star far fa-star"></i>

知道我错过了什么吗？我也尝试混合 class 和 ngClass 来拆分样式的公共部分，但我遇到了同样的问题。

非常感谢！

Answer 1

我看到了这个问题的一种解决方法。你能改变你的类吗，例如：

getClasses(star) {
  return {
    'full' : star === 'full',
    'half' : star === 'half', 
    'empty' : star === 'empty' 
}}

我也不确定如果你知道这个但是你可以将方法传递给 ngClass 指令

<i *ngFor="let star of stars" [ngClass]="getClasses(star)">
  {{star}}
</i>

angular 9: ngFor 中 ngClass 的多个条件

angular 9: Multiple conditions on ngClass inside a ngFor

css

ng-class

angular