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

Question

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

我在ng-bootstrap的文档中看到，StarTemplateContext接口有两个属性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

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

Ng Bootstrap rating star color based on selected count

ng-bootstrap

angular