fontawesome onclick图标使用材质表更改角度

时间:2020-06-01 20:08:06

标签: javascript html angular angular8

我想在收藏夹图标为空时填写它。在单击“收藏夹”图标时,我必须显示稳定的收藏夹图标。

我尝试过下面的代码

    <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);
   }

上面的代码无法正常工作,请让我知道我在这里做错了

1 个答案:

答案 0 :(得分:2)

this post您的问题似乎是字体很棒,将i元素标签返回到svg。这就是为什么您不能更改它的原因。您应该关闭真棒字体的autoReplaceSvg属性

将以下内容放在index.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" />

component.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>