使用Pipe Angular4的值的条件字体颜色

Question

我有一个由ngFor填充的列表和该列表中每个项目的字段，如下所示。

<p class="claimStatus"><i>{{merchantCard.merchantClaimStatus.claimed | merchStaus:merchantCard.merchantClaimStatus.inviteSent}}</i></p>

此字段已应用我的自定义管道。可能的结果是claimed，unclaimed和invite sent。我需要能够为每个结果应用不同的字体颜色。我想知道这怎么可能。

非常感谢任何帮助。

Answer 1

您可以使用[style.color]

进行设置

<p class="claimStatus" [style-color]='getColor(merchantCard.merchantClaimStatus)'>
    <i>
       {{merchantCard.merchantClaimStatus.claimed | 
                    merchStaus:merchantCard.merchantClaimStatus.inviteSent}}
    </i>
</p>

Typescript应该具有

方法

getColor(status){
  if(status.claimed){
     return 'blue'
  } else if(status.unclaimed){
     return 'red'   
  }
}

注意：我假设claimed和unclaimed是布尔属性