离子颜色文本取决于条件

Question

我有一个非常临时的解决方案，可以在用户点击后在小滑块中突出显示文本。

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

在这里，我通过将幻灯片内容包装到 粗体 括号中来突出显示所选内容。但是，我更希望字体是离子定义的 primary 或 secondary 颜色以突出显示用户点击。怎么样？

Answer 1

离子 4
您可以使用ion-text 标记的颜色属性。然后你的代码可能看起来像这样：

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

离子 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-property 中的三元运算符。