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

【问题标题】：How to bind Ionic Style property with condition in Angular 7?如何在 Angular 7 中将 Ionic Style 属性与条件绑定？
【发布时间】：2023-03-19 12:13:02
【问题描述】：

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

工作正常

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

问题

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

【问题讨论】：

检查这个：stackoverflow.com/questions/44022439/…
已经尝试使用 [ngClass]。但是，什么也没发生。
那么我认为您需要检查您的状况，即“item.Valid == true”是否正常工作？
无条件试用？这意味着硬编码值
{{item.Valid == true ? '有效' : '无效'}}

标签： javascript css angular ionic-framework

【解决方案1】：

如果你只想改变颜色，你可以绑定[color]属性：

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

注意，使用[ngStyle] 和 color 属性会改变 DOM 元素的颜色，这意味着内部文本颜色会改变。与离子颜色属性无关

Here's an example to illustrate

【讨论】：

但是，这种方式 item.isValid 始终为 false 并显示警告。这是我的代码行： {{item.Valid == true ? '有效' : '无效'}}
我已经用 stackblitz 示例更新了答案，以展示如何使用 ngStyle
它工作正常。我明白了。但是，如果我想使用多个属性，那么我必须单独编写这个吗？例如，[颜色]，[轮廓]等。或者，有没有什么组合方式？
好吧，使用 ngStyle 您仍然需要手动输入每个属性（如背景颜色、轮廓等），唯一的区别是您将它们全部输入 ngStyle 而不是不同的属性的离子成分（在我看来，它的可读性更差）