Цвет звезды рейтинга Ng Bootstrap на основе выбранного количества
Я применяю звездный рейтинг с помощью пользовательского шаблона рейтинга. Я хочу изменить цвет выбранных звезд на основе выбранного в данный момент количества. Например, 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>
Но теперь я хочу, чтобы все выбранные звезды были одного цвета. Есть идеи, как это реализовать?
Я думаю, вы неправильно поняли мой вопрос. Смотрите мое решение ниже.
::glups:: Я действительно неправильно понял ваш вопрос, извините
Ответы 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">★</span>
</ng-template>
</ngb-rating>
</div>
См. работающее решение здесь https://stackblitz.com/edit/angular-hfevz9-jpxukv
просто поместите .filled css на последнее место и удалите все .filled.class, см. stackblitz.com/edit/angular-hfevz9?file=app/rating-template.ts