在喜欢/不喜欢时动态更改离子图标颜色

Question

我在喜欢或不喜欢该项目时无法更改图标的颜色。 我的 ngIf 似乎有什么问题？ HTML

 <ion-icon *ngIf="!project.likedBy" color="dark" name="heart">
 </ion-icon>

 <ion-icon *ngIf="project.likedBy" color="danger" name="heart">
 </ion-icon>
 <span>{{project.numLikes}}</span>

Answer 1

要动态更改颜色，您不需要创建2个图标。 您可以编写表达式来动态更改颜色，如下所示。

<ion-icon [color]="project.likedBy ? 'danger' : 'dark'" name="heart">

还要确保likesBy属性是布尔值。 否则，您可能需要调整条件以设置颜色字符串。

Answer 2

***In Typescript***

if(favourite) {
            x.FavouriteImg = 'danger';
          } else {
            x.FavouriteImg = 'dark';
          }
    enter code here

**In design page**

 <ion-icon [color]="item.FavouriteImg" name="heart" slot="end"></ion-icon>