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

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