如何在Angular 7中将Ionic Style属性与条件绑定？

Question

我正在使用离子芯片。但是，当我想在条件[ngStyle]中编写带有条件的color属性时出现问题。

  

工作正常

<ion-chip color="warning"> ABC Heading </ion-chip>

  

问题

<ion-chip [ngStyle]="{'color': item.Valid == true ? 'success' : 'warning'}"> {{item.Valid == true ? 'Valid' : 'Invalid'}} </ion-chip>

Answer 1

如果只想更改颜色，则只需绑定[color]属性：

 <ion-chip [color]="item.isValid?'success':'warning'"> ABC Heading </ion-chip>

请注意，将[ngStyle]与color属性一起使用将更改DOM元素的颜色，这意味着内部文本颜色将更改。与离子的颜色属性无关

Here's an example to illustrate