Question

我正在尝试根据某个值更改font-awesome图标，但是即使在更改模型后，它仍设置为原始图标。这是我的代码

在Controller

if (foo.change < 0) {
   foo.icon = "fa fa-sort-down";
} else {
  foo.icon = "fas fa-sort-up";
}

在我的HTML

<i [className]="foo.icon"></i>

是否有一种基于model或check动态更新图标的方法？

Answer 1

使用[ngClass]

<i  [ngClass]="foo.change < 0 ? 'fa fa-sort-down' : 'fas fa-sort-up'"></i>

Answer 2

我知道这样做不是合法的（干净的）技术方法，但是我会将两个fa fa图标放在不同的DIV中，而将其中一个隐藏。而不是使用一点JavaScript函数在单击时切换隐藏属性。取决于您的JavaScript技能的发展程度，您可以结合一些循环，计数器等来使一切正常。

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div id="up">
	<button onclick="myFunction()">
		Sort <i class="fa fa-sort-up"></i>
	</button>
</div>
<div id="down" hidden>
	<button onclick="myFunction()">
		Sort <i class="fa fa-sort-down"></i>
	</button>
</div>

<script>
function myFunction(){
	var up = document.getElementById('up');
	var down = document.getElementById('down');
	
	if (down.hidden == true){
		down.hidden = false;
		up.hidden = true;
	} else {
		down.hidden = true;
		up.hidden = false;
	}
}
</script>
</body>
</html>

我希望它会有所帮助:)

Answer 3

我在网上找到了this：

该错误是由于Fontawesome JS库动态地夹在中间用svg元素替换使用特定类定义的元素共享初始元素的属性，因此您不能使用元素标签名称以将其选中：您需要选择创建的新svg 元素通过另一种方式

因此，最简单的解决方案是：

<i *ngIf="foo.change < 0" [className]="fa fa-sort-down"></i>
<i *ngIf="foo.change >= 0" [className]="fas fa-sort-up"></i>

Answer 4

对于任何在此问题上徘徊的人，解决方案是使用很棒的有角字体。查看说明here

我能够使用很棒的link角形字体来使它工作

Answer 5

<i class="pi" [ngClass]="{'true-icon pi-check-circle': dataEithertrueOrFalse, 'false-icon pi-times-circle': !dataEithertrueOrFalse}"></i>

如果你想动态地改变样式，你可以创建一个函数（这里我用名称函数 Color 创建，其输入是 dataEithertrueOrFalse）。

<i class="pi" [style.color]="function_Color(dataEithertrueOrFalse)" [ngClass]="{'true-icon pi-check-circle': dataEithertrueOrFalse, 'false-icon pi-times-circle': !dataEithertrueOrFalse}"></i>

动态更改角度6中的图标

5 个答案: