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

Question

我有一个聊天列表，我喜欢根据聊天状态(来自属性 chat.status)更改 ionic 图标的颜色:

<ion-list  *ngFor = "let chat of chats">
 <ion-item>
   <ion-icon name="ellipse-outline" slot ="end"  color ="primary"></ion-icon>
      <ion-label>
        <h2> {{chat.username}} </h2>
      </ion-label>
 </ion-item>
</ion-list>

当 chat.status 为 A 时，图标颜色应为红色；当 chat.status 为 B 时，图标颜色应为绿色。我该怎么做？

非常感谢

Answer 1

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

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

我使用 Ionic 的 danger 作为红色，使用 Ionic 的 success 颜色作为绿色，但您可以根据需要添加自己的颜色。

另一种选择是向 ion-icon 元素添加一个类并使用 CSS 设置颜色(如 https://ionicons.com/usage 中所述):

<ion-icon 
  slot ="end" 
  name="ellipse-outline" 
  [class.red]="chat.status === 'A'"
  [class.green]="chat.status === 'B'"
></ion-icon>

然后在你的 scss 文件中:

ion-icon.red {
  color: red; // your red color
}

ion-icon.green {
  color: green; // your green color
}