Bootstrap ngb-评级一半的明星

Question

我正在使用 ng-rating 来显示分数的平均值。问题是当平均值为 3.97 时。 Ng-rating 仍然显示为 3 星。我怎样才能让它像半颗星星一样显示？ 我的html：

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

3.67 值的示例： star

编辑： 在尝试来自引导站点 4 的解决方案时 hearts 心塞有点方？

编辑2：

模板：

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

我已将代码更改为 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;
    }

它给出了结果： stars

Answer 1

对于带小数的自定义模板，您可以使用以下内容：

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

<ngb-rating max="5"
  [(rate)]="overallScore"
  [readonly]="true"
  [starTemplate]="scoreTemplate">
</ngb-rating>

但您还需要样式：

.star {
  position: relative;
  display: inline-block;
  font-size: 3rem;
  color: #d3d3d3;

  &.full {
    color: #ffa600;
  }

  &.half {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    color: #ffa600;
  }
}

只需要半星而不是所有小数：

<ng-template #scoreTemplate let-fill="fill">
    <span class="star" [class.full]="fill < 50">
      <span class="half" [style.width.%]="fill >= 50 ? 50 : 0">⭐</span>⭐
    </span>
</ng-template>

此外，您可以将表情符号替换为您的自定义图标。