Boostrap 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 值示例：星號

編輯：從引導站點嘗試解決方案時，4顆心的填充有點方？

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>

但您還需要 styles：

.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>

此外，您可以用您的自定義圖標替換表情符號。