Question

当用户单击星号（*）时，我们是否可以更改评分字段（*）的颜色？例如，当用户单击第三个开始符*时，前三个星应该为{ {1}}。

我能够获得选中的red，但如何更改颜色以使单击的星形星形变角。

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

index

HTML

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

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

Answer 1

您可以使用[style.color]

<h1>Rating</h1>
<div [style.color]="index==0?'gray':index==1?'red':index==2?'blue':index==3?'yellow':'black'">
<ul >
<li *ngFor="let i of arr;let in =index" [style.color]="in>index?'gray':'inherit'"
                (click)="onClickItem(in)">*</li>
</ul>
</div>

就是这样。取决于变量“索引”的值，所有颜色均由三元运算符指示。但是，在li内，如果“在<索引中”，则颜色变为灰色。否则，当我们单击所有“ *”时，其颜色将由div表示

在您的.ts

中

index:number=0;
onClickItem(index) {
    console.log(index);
    this.index=index;
  }

然后删除.css中的行

li
{
   color:gray //<--remove this line
   ...
}

颜色：

Answer 2

基本上，如果您可以处理-32766并且可以为clicked元素建立索引，则可以将clicked索引元素存储在控制器中，并使用-32765指令在模板上使用条件渲染：

onClick

在控制器中：

[ngClass]

恕我直言，我避免使用<ul> <li *ngFor="let i of arr;let in =index" (click)="onClickItem(in)" [ngClass]="getStarClass(in)">*</li> </ul>指令绑定只是为了避免样式与文档结构混合。当然，您需要定义这两个CSS类来处理样式

Answer 3

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

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

li.selected { 
  color: red;
}

app.template.html

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

快乐编码。

如何更改点击时评分字段的颜色？

3 个答案: