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

我用的是离子芯片。但是，当我想在[ngStyle]标记中写入带有条件的颜色属性时，问题就来了

很好

问题

---

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

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

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

---

选中此项：已尝试使用[ngClass]。但是，什么也没发生。然后我认为您需要检查您的条件，即item.Valid==true它是否正常工作？在没有条件的情况下尝试？这意味着硬编码值{{item.Valid==true？'Valid'：'Invalid'}}，但这样，item.isValid始终为false，并显示警告。这是我的代码行：{{item.Valid==true？'Valid'：'Invalid'}我已经用stackblitz示例更新了答案，以展示如何使用ngStyleIt。我明白了。但是，如果我想使用多个属性，那么我必须单独编写？例如，[color]、[outline]等。或者，是否有任何组合方式？使用ngStyle，您仍然需要手动键入每个属性，如背景色、轮廓等。。。唯一的区别是，你在ngStyle中输入它们，而不是离子组分的不同属性，在我看来，离子组分的可读性甚至更低

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

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