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