如何在 Ionic-Angular 中動態更改圖標顏色？

Question

我有一個聊天列表，我喜歡根據聊天狀態更改 ion-icon 的顏色（來自屬性 chat.status）：

<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顏色用作綠色，但您可以根據需要添加自己的 colors。

另一種選擇可能是將 class 添加到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
}

Answer 2

一種方法是在模板中使用style binding ：

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

另一種方法是在模板中使用directive ：

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

您可以從返回 object 的組件控制 styles：

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

Answer 3

您還可以使用style binding直接提供十六進制顏色

<!-- mycolor = "#123456" -->
<ion-icon [style.color]="mycolor" name="square"></ion-icon>