角度2 - 文字列の値に依存するブートストラップクラスを設定する

Question

私は疑問があり、解決方法はわかりません。サーバーからデータを取り出してテーブルに表示します。これらのフィールドの1つは、 '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'; 
}