如何让Bootstrap的ngb-rating组件实现半星/部分填充星级显示

云原生阿岚

2026-9-24

ngb-rating非整数评分部分填充实现

问题说明

默认使用ngb-rating组件展示评分平均值时，若分值为非整数（如3.97、3.67），组件仅会展示整数部分对应的完整星，无法实现按比例填充的半星/部分星效果。
初始调用代码：

<div style="font-size: x-large; color: orange;"><ngb-rating [max]="5" [(rate)]="overallScore" [readonly]="false"></ngb-rating></div>

此前尝试Bootstrap官方提供的第四种自定义方案时，还出现了心形填充效果边缘偏方正的显示异常问题。

解决方案

通过自定义星级模板配合样式即可实现任意比例的部分填充效果，具体代码如下：

HTML模板代码

<ng-template #t let-fill="fill">
    <span class="star" [class.full]="fill === 100">
      <span class="half" [style.width.%]="fill">⭐</span>⭐
    </span>
</ng-template>

<!-- 调用ngb-rating时绑定自定义模板 -->
<ngb-rating [max]="5" [(rate)]="overallScore" [readonly]="false" [starTemplate]="t"></ngb-rating>

CSS样式代码

.star {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    color: #d3d3d3;
}
.star.full {
    color: #ffa600;
}
/* 注意此处为子元素选择器，若遗漏空格会导致样式不生效 */
.star .half {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    color: #ffa600;
}