如何在Angular5视图中使用Font Awesome显示评分星级

嘿，这个需求我之前做项目的时候刚好碰到过，给你一套简洁实用的解决方案，完美适配你数据库里的小数评分（比如2.5这种）：

第一步：在组件里处理评分数据 #

首先在你的组件类中，写一个方法把评分数值转换成便于模板遍历的星星类型数组（全星、半星、空星）：

// 假设你的组件里已经有一个存储评分的变量，比如：
rating: number = 2.5;

// 生成星星类型数组的方法
getStarsArray(): string[] {
  // 计算全星数量
  const fullStars = Math.floor(this.rating);
  // 判断是否需要显示半星（这里以0.5为阈值，你可以根据需求调整）
  const hasHalfStar = this.rating % 1 >= 0.5;
  // 计算空星数量
  const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);

  const stars: string[] = [];
  // 添加全星
  for (let i = 0; i < fullStars; i++) {
    stars.push('full');
  }
  // 添加半星（如果需要）
  if (hasHalfStar) {
    stars.push('half');
  }
  // 添加空星
  for (let i = 0; i < emptyStars; i++) {
    stars.push('empty');
  }
  return stars;
}

第二步：在模板中动态渲染星星 #

把你原来的静态<ul>替换成下面的动态模板，用*ngFor遍历生成的星星数组，根据星星类型绑定对应的Font Awesome类：

<ul class="rating inline-ul">
  <li *ngFor="let starType of getStarsArray()">
    <i 
      class="fa" 
      [ngClass]="{
        'fa-star amber-text': starType === 'full',
        'fa-star-half-o amber-text': starType === 'half',
        'fa-star': starType === 'empty'
      }"
    ></i>
  </li>
</ul>

小提示 #

• 如果你的Font Awesome是新版（比如v5+），半星的类名可能是fa-star-half-stroke，记得根据你实际使用的版本调整。
• 你可以修改半星的判断阈值，比如把this.rating % 1 >= 0.5改成>= 0.3，这样2.3分也会显示半星，更贴合你的业务需求。

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