Angular 如何将浮点类型的平均评分值转换为星级样式展示

第一步：预处理浮点评分 #

你现有评分体系是0.5步长的半星规则，首先需要把后端返回的浮点型平均分四舍五入到最近的0.5倍数，和提交规则对齐，参考TS代码：

// 入参为后端返回的原始浮点平均分
formatRawRating(rawRating: number): number {
  return Math.round(rawRating * 2) / 2;
}
// 调用示例：3.2分处理后为3.0，3.3分处理后为3.5，4.7分处理后为5.0
public formattedRate = this.formatRawRating(yourRawAverageRating);

方案1：完全复用现有提交结构做只读展示 #

不需要修改你已写的full、half样式，只需给input加disabled属性，同时绑定checked状态即可：

<ng-container *ngFor="let rateVal of [5, 4, 3, 2, 1]">
    <input disabled [checked]="formattedRate === rateVal" [id]="'star'+rateVal" [value]="rateVal-0.5" name="displayRating" type="radio" />
    <label class="full" [for]="'star'+rateVal"></label>
    <input disabled [checked]="formattedRate === (rateVal - 0.5)" [value]="rateVal-0.5" [id]="'halfstar'+rateVal" name="displayRating" type="radio" />
    <label class="half" [for]="'halfstar'+rateVal"></label>
</ng-container>

该方案优势是展示效果和用户提交评分时的视觉完全一致，改造成本最低。

方案2：轻量化自定义展示结构 #

如果不需要保留input结构，可以写更精简的展示代码，新增空星样式即可：

<div class="rating-show">
  <ng-container *ngFor="let starIndex of [1,2,3,4,5]">
    <!-- 全亮星 -->
    <span *ngIf="formattedRate >= starIndex" class="star full"></span>
    <!-- 半亮星 -->
    <span *ngIf="formattedRate >= starIndex - 0.5 && formattedRate < starIndex" class="star half"></span>
    <!-- 空星 -->
    <span *ngIf="formattedRate < starIndex - 0.5" class="star empty"></span>
  </ng-container>
  <!-- 可选：展示数字评分 -->
  <span class="rate-num">{{ yourRawAverageRating.toFixed(1) }}</span>
</div>

补充说明 #

如果不需要严格对齐半星提交规则，要实现更精细的百分比星级（比如3.2分显示3颗全亮+第4颗20%亮度），可以通过CSS背景裁剪、渐变宽度控制实现，不过0.5步长的星级展示已经能满足绝大多数产品的用户感知需求。

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