在喜欢/不喜欢的情况下动态更改离子图标颜色

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属性是布尔值。否则，您可能需要调整条件以设置颜色字符串。