Angular: 星级评分

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

---

可能是如何在单击时更改评分字段的颜色？的重复问题。 - Muhammed Albarmavi

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

---

这个程序节省了我数小时的工作时间，使用纯Angular实现非常容易，无需使用任何外部CSS或JavaScript框架。 - Thakur

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>

Component.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

Answer 3

我尝试使用 Material Icon，它正在工作。

HTML：

<ul class="list-inline rating-list" *ngFor="let star of stars; let i= index">
    <li (click)="countStar(star)" [ngClass]="{'selected': (star <= selectedValue)}" (mouseover)="addClass(star)"
         (mouseout)="removeClass()"> <span class="material-icons">star</span>
    </li>
</ul>

ts

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

countStar(star: number) {
  this.isMouseover = false;
  this.selectedValue = star;
}

 addClass(star: number) {
  if (this.isMouseover) {
    this.selectedValue = star;
  }
 }

 removeClass() {
   if (this.isMouseover) {
      this.selectedValue = 0;
   }
 }

CSS

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

- Asiri Manjitha

Answer 4

对Mohit解决方案的变化

I adjusted Mohit's solution to achieve the behavior I was looking for. This will make it so that when you hover over a star that is lower than the current selected rating, the stars above will un-highlight and then go back to the original value if nothing is selected.

addClass(star: number) {
    let ab = '';
    for (let i = 0; i < star; i++) {
      ab = 'starId' + i;
      document.getElementById(ab)?.classList.add('selected');
    }

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

- Pablo Nathanielle Gomez