如何在Angular模板中结合*ngFor编写CSS类？Angular4星级评分实现求助

嘿，我来帮你搞定这个Angular星级评分的问题～

你当前的代码问题主要出在两个地方：一是当评分小于i + 0.5时，对应的<i>标签根本不会渲染，导致星级位置出现空缺；二是ngIf的判断逻辑顺序可以优化，避免潜在的覆盖问题。

我给你调整一下代码，保证能达到预期的星级显示效果：

组件代码（可以保持不变，或者优化可读性） #

// 两种写法都可以，Array.from的可读性更好一点
public stars: any[] = Array.from({ length: 5 }); 
// public stars: any[] = new Array(5); 
public starValue: number = 2.7; // 示例评分，你可以替换成实际值

模板代码（核心修正） #

推荐用ngClass来统一控制图标类，这样每个星级位置都会有对应的图标，不会空缺：

<ul class="rating inline-ul">
  <li *ngFor="let star of stars; let i = index">
    <i class="fa amber-text" 
       [ngClass]="{
         'fa-star': starValue >= i + 1,
         'fa-star-half-o': starValue >= i + 0.5 && starValue < i + 1,
         'fa-star-o': starValue < i + 0.5
       }">
    </i>
  </li>
</ul>

如果你更喜欢用ngIf分别渲染三种状态，也可以这么写：

<ul class="rating inline-ul">
  <li *ngFor="let star of stars; let i = index">
    <i class="fa fa-star amber-text" *ngIf="starValue >= i + 1"></i>
    <i class="fa fa-star-half-o amber-text" *ngIf="starValue >= i + 0.5 && starValue < i + 1"></i>
    <i class="fa fa-star-o amber-text" *ngIf="starValue < i + 0.5"></i>
  </li>
</ul>

额外提示 #

1. 确保你已经在项目中正确引入了Font Awesome，不然图标会显示不出来；
2. 可以给starValue加个边界处理，比如限制在0-5之间：starValue = Math.max(0, Math.min(5, starValue))，避免超出范围的评分导致显示异常。

内容的提问来源于stack exchange，提问作者LearnToday