角度：星级

Question

我想实施评级星级系统。单击后返回正确的星号。我在正确显示所选星星时遇到问题。就像这张照片一样，它没有给我显示黄色的 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;
}

欢迎任何帮助或建议。

原文由 k_dadun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须存储选定的值：

 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>

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

原文由 Sergey Mell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

改良版

在此解决方案中，即使在悬停时，所有先前星星的颜色也会变为黄色：

HTML :

 <div class="row">
  <div class="col-sm-12">
      <ul class="list-inline rating-list" *ngFor="let star of stars; let i= index" style="display: inline-block">
          <li (click)="countStar(star)" id="{{'starId'+i}}" [ngClass]="{'selected': (star <= selectedValue)}"
           (mouseover)="addClass(star)" (mouseout)="removeClass(star)"> ★
          </li>
      </ul>
  </div>
</div>

组件.ts ：

 stars: number[] = [1, 2, 3, 4, 5];
selectedValue: number = 0;

countStar(star) {
    this.selectedValue = star;
  }

addClass(star) {
   let ab = "";
   for (let i = 0; i < star; i++) {
     ab = "starId" + i;
     document.getElementById(ab).classList.add("selected");
   }
}
removeClass(star) {
   let ab = "";
   for (let i = star-1; i >= this.selectedValue; i--) {
     ab = "starId" + i;
     document.getElementById(ab).classList.remove("selected");
   }
}

SCSS ：

 .rating-list {
    li {
    font-size: 20px;
        float: right;
        color: #ddd;
        padding: 10px 5px;
        &:hover {
            color: #ffd700;
            ~ {
                li {
                    color: #ffd700;
                }
            }
        }
    }
    li.selected {
        color: #ffd700;
    }
    display: inline-block;
    list-style: none;
}

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

原文由 Mohit Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议