我想在最喜欢的图标为空时填充它。单击最喜欢的图标时,我必须显示固定的最喜欢的图标。
我尝试了下面的代码
<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);
}
上面的代码不起作用,请让我知道我在这里做错了什么
最佳答案
Demo你的问题似乎是 font Awesome 将 i 元素标签返回到 svg 。这就是为什么你无法改变它。您应该关闭 font Awesome 中的 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" />
组件.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>
关于javascript - fontawesome onclick 图标使用 Material 表更改 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62140205/