[英]fontawesome onclick icon change angular using material table
I want to fill favorite icon when it's empty.我想在最喜欢的图标为空时填充它。 While click on the favorite icon i have to display solid favorite icon.
当点击最喜欢的图标时,我必须显示坚实的最喜欢的图标。
I tried like below code我试过像下面的代码
<span class="icon iconVisibile" (click)="isClicked()">
<i class="fa-star"[ngClass]="isSelectedFav ? 'fas' : 'far'"></i>
</span>
ts ts
public isSelected:boolean = false;
isClicked(){
this.isSelected = true;
console.log(this.isSelected);
}
with above code that is not working please let me know what I am doing wrong here上面的代码不起作用,请让我知道我在这里做错了什么
Demo Your problem seems that font awesome return i element tag to svg. 演示您的问题似乎字体很棒将 i 元素标签返回到 svg。 That is why you can't change it.
这就是为什么你不能改变它。 you should close
autoReplaceSvg
property in font awesome你应该关闭
autoReplaceSvg
字体真棒属性
put below ones in index.html把索引放在下面。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组件.ts
public isSelected:boolean = false;
isClicked(){
this.isSelected = true;
}
html html
<span class="icon iconVisibile" (click)="isClicked()">
<i class="fa-star"[ngClass]="isSelected ? 'fas' : 'far'"></i>
</span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.