离子颜色文本取决于条件

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-属性.

中的三元运算符

离子颜色文本取决于条件

Ionic color text depending on condition

css

angular

ionic-framework

ionic3