首页 文章

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

提问于
浏览
2

我喜欢在喜欢或不喜欢项目时改变图标的颜色 . 我的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>

enter image description here

1 回答

  • 5

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

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

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

相关问题