Html 将来自后端服务器的字符串显示为图标

我从后端服务器得到angular 2/4应用程序的响应。该响应包含一个属性“connectionStatus”，该属性用“UP”或“DOWN”表示数据库连接的状态。我使用以下代码在视图中显示检索到的状态和其他信息：

<tbody>
    <tr *ngFor='let database of environment.databases'>
        <td>{{database.connectionName}}</td>
        <td>{{database.dbSourceType}}</td>
        <td>{{database.username}}</td>
        <td>{{database.password}}</td>
        <td>{{database.connectionUrl}}</td>
        <td>{{database.creationDate}}</td>
        <td>{{database.connectionStatus}}</td>
        <td>
            <button (click)='onEditDatabase(environment,database)'class="btn btn-primary btn-sm oi oi-cog"></button>
            <button (click)='onDeleteDatabase(database)'class="btn btn-danger btn-sm oi oi-trash"></button>
        </td>
    </tr>
</tbody>

{{database.connectionName}
{{database.dbSourceType}
{{database.username}
{{database.password}}
{{database.connectionUrl}}
{{database.creationDate}
{{database.connectionStatus}

---

我不想将状态显示为“向上”或“向下”，而是想使用。如果状态为“向上”，则使用

检查

-图标，如果状态为向下，则

闪烁

-图标。我怎么能意识到这一点？非常感谢您的帮助。

您可以根据自己的情况使用*ngIf或[hidden]显示其中一种状态

<td *ngIf="database.connectionStatus">your icon UP html tag here</td>

<td *ngIf="!database.connectionStatus">your icon DOWN html tag here</td>

您的图标在此处显示html标记
你的图标下html标签在这里

您可以使用*ngIf或[hidden]根据您的情况显示其中一种状态

<td *ngIf="database.connectionStatus">your icon UP html tag here</td>

<td *ngIf="!database.connectionStatus">your icon DOWN html tag here</td>

您的图标在此处显示html标记
你的图标下html标签在这里

利用ngClass

<td [ngClass]="(database.connectionStatus ==='UP')?'upclass':'downclass'"></td>

.upclass{check-icon}


.downclass{flash-icon}

---

利用ngClass

<td [ngClass]="(database.connectionStatus ==='UP')?'upclass':'downclass'"></td>

.upclass{check-icon}


.downclass{flash-icon}

---

大括号中的语法是什么？图标类名为

oi-oi-check

，然后添加该类，而不是

upclass

或

downcclass

。它是一个三元运算符。对了，只需添加图标的类名，非常感谢。大括号中的语法是什么？图标类名为

oi-oi-check

，然后添加该类，而不是

upclass

或

downcclass

。这是一个三元运算符。对，只需添加图标的类名，非常感谢。在我发布问题后，我对

ngIf

有相同的想法，而且效果很好，但拉胡尔·辛格的方法要好得多，我有6行代码，而

ngClass

只有一行。我仍然感谢你的帮助=）在我发布了这个问题后，我对

ngIf

有了同样的想法，而且效果很好，但是拉胡尔·辛格的方法要好得多，使用

ngIf

我有6行代码，而

ngClass

只有一行。我仍然感谢你的帮助