Question

我从后端服务器获得了我的角度2/4应用程序的响应。响应包括一个属性＆＃34; connectionStatus＆＃34;，它指示与＆＃34; UP＆＃34;的数据库连接的状态。或＆＃34; DOWN＆＃34;。我使用以下代码在视图中显示检索到的状态和其他信息：

<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>

而不是将状态显示为＆＃34; UP＆＃34;或者＆＃34; DOWN＆＃34;，我想使用openiconics。如果状态为＆＃34; UP＆＃34;，则使用check - 图标（如果已关闭）flash - 图标。我怎么能意识到这一点？我很感激所有帮助。

Answer 1

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

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

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

Answer 2

使用 ngClass

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

css中的

定义了类和图标

.upclass{check-icon}


.downclass{flash-icon}

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

2 个答案: