条件文本离子3的颜色更改

问题描述

<ion-list *ngFor="let goal of goals" >
 <ion-card color="mint">
  <br>
  <h2 text-center>{{goal.name}}</h2> 
  <button ion-button [navPush] ="budget" full clear text-center (click)="viewGoal(goal.name,goal.amount,goal.startDate,goal.endDate,goal.optional,goal.goals_id)" >

  <h1 ><span style="font-size:large;"> $ </span>{{(totalExps[goal.goals_id] == undefined) ? 0 : 
  (totalExps[goal.goals_id])}} of $ {{goal.amount}}</h1>

  </button>

 <p text-center>$ {{(totalExps[goal.goals_id] == undefined) ? goal.amount : (goal.amount - 
  totalExps[goal.goals_id])}} till budget is reached!</p>

 </ion-card>

当金额大于目标金额时，我想更改总费用的文字颜色。

解决方法

您必须使用ngStyle或ngClass角度指令来实现此目的。

<some-element [ngStyle]="objExp">...</some-element>

示例

<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }"></<div>

Tutorial for explanation Official Angular docs