Question

我有一个疑问，我不知道如何解决。我从服务器带来一些数据并将其显示在桌面上。其中一个字段是一个字符串，其值为“OK”，“ERROR”或“CANCEL”。可以根据值分配一些引导类吗？例如，如果'OK'则为bg-succes;如果为'CANCEL'则为bg-danger。

示例：

<table class="table table-hover">
    <thead class="thead-inverse">
        <tr>
            <th class="text-center"><strong>Date 1/ Date 2</strong></th>
            <th class="text-center"><strong>Status</strong></th>
            <th class="text-center"><strong>Date 3</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of items">
            <td class="text-center">  
              <tr class="text-center"> {{item.Date1}} </tr>
              <tr class="text-center"> {{item.Date2}} </tr>
            </td>
             <td class="text-center">
                <tr>Status</tr>
                <tr class="bg-success"> {{item.Status}}</tr>//Want to assign here the class                  
            </td>
            <td class="text-center"> {{item.Date3}} </td>            
        </tr>
    </tbody>
</table>

顺便感谢！

Answer 1

您可以使用ngClass指令实现相同的目标。

<tr [ngClass]="getStatusClass(item.Status)"> {{item.Status}}</tr>

<强>代码

getStatusClass(status: string){
   let statuses = {"OK": "bg-success", "ERROR": "bg-danger", "CANCEL": "bg-warning"}
   return statuses[status] || 'bg-default';
}

Angular 2 - 设置bootstrap类取决于字符串值

1 个答案: