angular - Ng Bootstrap 根据所选计数对星级颜色进行评级

Question

我正在使用自定义评级模板实现星级评级。我想根据当前选择的计数更改所选星星的颜色。例如，4 个选定的星星 = 绿色，3 个选定的星星 = 橙色，...

我在ng-bootstrap的文档中看到StarTemplateContext接口(interface)有两个属性fill和index。基于此属性，我能够更改特定索引上的颜色。例如，第一颗星为绿色，第二颗星为橙色。

 <ngb-rating [starTemplate]="t" [rate]=data.stars></ngb-rating>

<ng-template #t let-fill="fill" let-index="index">
  <span class="star" [class.full]="fill === 100" [class.green]="index === 4" [class.orange]="index === 3">
    <i class="fas fa-square square-star"></i>
  </span>
</ng-template>

但现在我想让所有选定的星星都具有相同的颜色。有什么想法如何实现吗？

Answer 1

诀窍是将ng-template 添加到已知速率值的ngb- rating 标记中。

<div *ngFor="let rating of data">
<ngb-rating [rate]="rating" [max]=4>
  <ng-template let-fill="fill">
    <span class="star color{{rating}}" [class.filled]="fill === 100">&#9733;</span>
  </ng-template>
</ngb-rating>
</div>

在此处查看正在运行的解决方案 https://stackblitz.com/edit/angular-hfevz9-jpxukv