Question

我在尝试使用角度打印页面中典型的星级小部件时遇到一些问题。也许会有一种更简单的方法可以使用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个，但不能正确绘制其他两个。根据我在调试器中看到的内容，该类的某些部分遗漏了……

<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>

角度9：ngFor

1 个答案: