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

[ngClass]

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

li.selected { 
  color: red;
}

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

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

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

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

onClick [ngClass]

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

onClickItem(in) {
  this.clickedIdx = in
}

getStarClass(in: number) {
  if (in >= this.clickedIdx) return { 'color-gray': true, 'color-red': false }
  else return { 'color-gray': false, 'color-red': true}
}

[style.color]