ион-ионный класс меняет цвет в зависимости от состояния

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>