Ioni c цветной текст в зависимости от состояния

Question

У меня есть очень временное решение для выделения текста на небольшом слайдере после нажатия пользователем.

<ion-slide *ngFor="let loopValue of values">
<div *ngIf="viewValue == loopValue">
    <b>
        {{loopValue}}
    </b>
</div>
<div *ngIf="viewValue != loopValue">
    {{loopValue}}
</div>
</ion-slide>

Здесь я выделяю выделение, заключая содержимое слайда в скобку жирный, Тем не менее, я бы предпочел, чтобы шрифт имел ионный c определенный основной или вторичный цвет, чтобы выделить нажатие пользователем. Как?

Answer 1

Иони c 4
Вы можете использовать свойство цвета тега ion-text . Тогда ваш код может выглядеть примерно так:

<ion-slide *ngFor="let loopValue of values">
  <ion-text [color]="viewValue == loopValue ? 'primary' : 'light'">
   {{loopValue}}
  </ion-text>
</ion-slide>

Иони c 3
Поскольку нет тега ion-text, который следует использовать ion-item вместо.
Вот пример (также созданный на stackblitz ):

<ion-slides>
  <ion-slide *ngFor="let loopValue of values">
    <ion-item [color]="viewValue == loopValue ? 'primary' : 'light'">
      {{loopValue}}
    </ion-item>
  </ion-slide>
</ion-slides>

Таким образом, вам не нужно копировать весь тег с *ngIf. Вместо этого цвет ion-text зависит от троичного оператора внутри свойства color.