时间戳

首页 > 解决方案 > 角度：星级

html - 角度：星级

问题描述

我想实施评级星系统。单击后返回正确的星值。我在正确显示所选星星时遇到问题。就像在这张照片中一样，它没有向我显示黄色的 3 颗星。如何改变它？零件：评级星

 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;
}

欢迎任何帮助或建议。

标签： htmlcssangular

解决方案

您必须存储选定的值：

countStar(star) {
    this.selectedValue = star;
    console.log('Value of star', star);
}

并添加类，这将改变所有评级小于或等于评级的星星的颜色：

.rating-list li.selected {
    color: #ffd700;
}

<li (click)="countStar(star)"
    [ngClass]="{'selected': (star <= selectedValue)}">
        <i class="fa fa-star"></i>
</li>

有关详细信息，请参阅完整示例。

推荐阅读