我想实现评分星级系统。点击后返回正确的星级值。我有一个问题,就是选定的星级不能正确地显示。就像这张图片一样,它没有显示3个黄色的星星。该怎么改变呢?
组件:
![rating star](https://istack.dev59.com/PfGlE.webp)
export class RatingStarComponent implements OnInit {
stars: number[] = [1, 2, 3, 4, 5];
constructor() { }
ngOnInit() {
}
countStar(star) {
console.log('Value of star', star);
}
}
HTML:
<div class="row">
<div class="col-sm-12">
<ul class="list-inline rating-list" *ngFor="let star of stars" style="display: inline-block" >
<li (click)="countStar(star)"><i class="fa fa-star "></i></li>
</ul>
</div>
</div>
CSS:
.rating-list li {
float: right;
color: #ddd;
padding: 10px 5px;
}
.rating-list li:hover,
.rating-list li:hover ~ li {
color: #ffd700;
}
.rating-list {
display: inline-block;
list-style: none;
}
欢迎提供任何帮助或建议。