Html 如何在Ionic Angular中动态更改图标颜色？

我有一个聊天列表，我喜欢根据聊天状态（从属性chat.status）更改离子图标的颜色：

{{chat.username}

当chat.status为A时，图标颜色应为红色，当chat.status为B时，图标颜色应为绿色。我如何才能做到这一点

---

非常感谢

您可以使用三元运算符以这种方式设置颜色：

[color]="chat.status === 'A' ? 'danger' : 'success'"

我使用爱奥尼亚的

danger

作为红色，爱奥尼亚的

success

作为绿色，但如果您愿意，可以添加自己的颜色

另一个选项是向

离子图标
元素添加一个类，并使用CSS设置颜色（如中所述）：

一种方法是在模板中使用
样式绑定
：

<ion-icon name="ellipse-outline" slot ="end" 
[style.color]="chat.status === 'A' ? 'red' : chat.status === 'B' ? 'green' : 'black'"></ion-icon>

<ion-icon name="ellipse-outline" slot ="end" [ngStyle]="colorIcon()"></ion-icon>

可以通过返回对象的组件控制样式：

public colorIcon(): Object {
    if (chat.status === 'A') {
        return {color: 'red'}
    } else if (chat.status === 'B') {
        return {color: 'green'}
   } else {
        return {}
   }
}

谢谢你的第一个建议奏效了！谢谢你的解决方案也在起作用。
<ion-icon name="ellipse-outline" slot ="end" 
[style.color]="chat.status === 'A' ? 'red' : chat.status === 'B' ? 'green' : 'black'"></ion-icon>

<ion-icon name="ellipse-outline" slot ="end" [ngStyle]="colorIcon()"></ion-icon>

public colorIcon(): Object {
    if (chat.status === 'A') {
        return {color: 'red'}
    } else if (chat.status === 'B') {
        return {color: 'green'}
   } else {
        return {}
   }
}