Question

我要通过自定义评分模板来实施星级评分。我想根据当前选定的计数更改选定星星的颜色。例如4个选定的星星=绿色，3个选定的星星=橙色，...

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

index

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

但是现在我要使所有选定的星星具有相同的颜色。有什么想法可以实现吗？

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评级星色（基于所选计数）

1 个答案: