离子-离子类别根据条件改变颜色

Question

我已经在申请中获得了评分。我有三个评级图标设置默认颜色。单击等级时，需要更改颜色。

我的.html页面

<ion-icon name="thumbs-down" [class]="item.Rating == '1' ? 'rating-red' : 'theme-color'" (click)="updateRating('1')"></ion-icon>
<ion-icon name="thumbs-up" [class]="item.Rating == '2' ? 'rating-orange fa-rotate-90' : 'theme-color fa-rotate-90'" (click)="updateRating('2')"></ion-icon>
<ion-icon name="thumbs-up" [class]="item.Rating == '3' ? 'rating-green' : 'theme-color'" (click)="updateRating('3')"></ion-icon>

我的.scss文件：

.rating-red {
    color: #e64d4d;
}

.rating-orange{
    color: orange;
}

.rating-green {
    color: #0dce0d;
}

我的.page.ts文件：

updateRating(rating){
    this._service.UpdateRating(rating).subscribe((response: any) => {

      this.Rating = rating;

      this._changeDet.detectChanges();
    });
  }

当我更新评分时，图标消失而不是改变颜色。选择第三个评级图标时，该图标消失。第二个图标消失，从橙色变为默认颜色。从默认颜色变为绿色时，第三个图标消失。

当我刷新页面时，更新的图标具有所选的正确颜色。

请帮助解决该问题。预先感谢。

Answer 1

使用它：

<ion-icon name="thumbs-down"  [ngClass]="{ 'rating-red': item.Rating == '1','rating-green':item.Rating != '1' }" (click)="updateRating('1')"></ion-icon>