基于文本使用 angular 8 和 font awesome 动态更改图标答案

【问题标题】：dynamically change icon based on the based on the text using angular 8 with font awesome基于文本使用 angular 8 和 font awesome 动态更改图标
【发布时间】：2020-06-06 06:40:27
【问题描述】：

我试图根据 span 中的值动态更改图标

这是我的 HTML 实际上在版本文本中只有两个值会出现

Active 如果是active 应该会出现成功图标
InActive 如果它处于非活动状态，则应该出现警告图标

我不确定如何在这里使用 ngclass 来获取值。

        <div class="pl-2">
            <div class="version-box">
                <i class="fa fa-check-circle text-warning ml-1"></i> 
                <i class="fa fa-check-circle text-success ml-1"></i>
                <span class="version-label">{{selectedVersion.versionText}}</span></div>
        </div>

请告诉我如何携带它

【问题讨论】：

您是否在 中寻找动态类？像这样？ 
是的，但是文本警告和文本成功将来自正确的字体真棒图标
如果是这种情况，您可以使用 *ngIf 像  
我试过这样
{{selectedVersion.versionText}}
值本身现在不会出现

标签： angular font-awesome angular8

【解决方案1】：

由于 Font-Awesome 使用类：只需使用 [ngClass] 属性：

<i class="fa fa-check-circle " [ngClass]="classToggle == true ? 'text-warning' : 'text-success'">

您可以通过这种方式更改任何您喜欢的课程。

一个quick Blitz

【讨论】：

非常感谢您的回复，但我不想改变颜色，我只想改变图标，并且不需要像切换类这样基于图标必须改变的值的操作跨度>
[ngClass]="classToggle==true ? 'fa-check-circle' : 'fa-exclamation-triangle'" 或您需要的任何图标也是如此。如果您查看代码，Icon 只是一个类
@Mahadevan 这个概念是一样的。 stackblitz.com/edit/angular-hedd9i 只需根据某些属性（可能是项目的属性）更改您的 FA 类。