如何更改点击时评分字段的颜色? [英] how to change the color of rating field on click?

问题描述

我们可以在用户单击星号( * )时更改评分字段( * )的颜色.例如，当用户单击第三个开始 * ，所以前三颗星应该是 red .

can we change the color of rating field (*) when user click on star (*) .Example when user click on third start * so first three star should be red .

我能够获得所选的 index ，但如何更改颜色，直到角形单击的星星为止.

I am able to get the selected index but how to change the color upto clicked star in angular .

这是我的代码 https://codesandbox.io/s/r70jn156pm

export class AppComponent {
  title = "CodeSandbox";
  arr: [] = [];
  constructor() {
    this.arr = [1, 2, 3, 4, 5];
  }

  onClickItem(index) {
    console.log(index);
    /// color should be red
  }

HTML

<h1>Rating</h1>

<ul>
<li *ngFor="let i of arr;let in =index" (click)="onClickItem(in)">*</li>
</ul>

推荐答案

我将定义与所选星星相关的类，并使用 [ngClass]

I will defined a class related to selected star and use [ngClass]

app.component.ts

app.component.ts

export class AppComponent {
  title = "CodeSandbox";
  arr: any[] = [];
  selectedRate:number = -1;
  constructor() {
    this.arr = [1, 2, 3, 4, 5];
  }
  onClickItem(index) {
    this.selectedRate=index
  }
}

app.component.css

app.component.css

li.selected { 
  color: red;
}

app.template.html

app.template.html

<ul>
    <li *ngFor="let i of arr;let in =index" (click)="onClickItem(in)" 
                      [ngClass]="{selected:in <= selectedRate}">*</li>
</ul>

快乐编码.

这篇关于如何更改点击时评分字段的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！