字体真棒点击图标使用材料表更改角度

Question

我想在收藏夹图标为空时填充它。单击收藏夹图标时，我必须显示稳定的收藏夹图标。

我尝试了以下代码

<span class="icon iconVisibile" (click)="isClicked()">
<i class="fa-star"[ngClass]="isSelectedFav ? 'fas' : 'far'"></i>
</span>

TS

public isSelected:boolean = false;
isClicked(){
this.isSelected = true;
console.log(this.isSelected);
}

使用上面的代码不起作用，请让我知道我在这里做错了什么

Answer 1

演示 您的问题似乎是字体真棒将 i 元素标签返回给 svg。这就是为什么你不能改变它。你应该关闭字体真棒autoReplaceSvg属性

在索引中放在下面的一个.html

<script type="text/javascript">
window.FontAwesomeConfig = { autoReplaceSvg: false }
</script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" />

组件.ts

public isSelected:boolean = false;
isClicked(){
this.isSelected = true;
}

.html

<span class="icon iconVisibile" (click)="isClicked()">
<i class="fa-star"[ngClass]="isSelected ? 'fas' : 'far'"></i>
</span>