ng色を設定するには？

Question

私はこのJSON持っている：

[{ 
    "nodename": "Main application Server", 
    "enabled": true 
}, 
{ 
    "nodename": "Main Server", 
    "enabled": false 
}] 

を、私はngForと私のテンプレートで、このデータを表示：

<div class="row" *ngFor="let list of lists"> 
     <div class="col-md-12 col-xs-12"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h2 class="panel-title text-center">Server: {{ list.nodename }}, {{ list.enabled }}</h2> 
       </div> 
      </div> 
     </div> 
<div> 

そして今、私はテンプレートに私のpanel-primaryに異なる色を設定します："enabled": true場合、緑色に設定してください。"enabled": falseの場合は赤色に設定してください。これはどうですか？ ngIf=...？または、他の何か？

Answer 1

経由でクラスを切り替える：

<div class="panel panel-primary" 
    [ngStyle]="{'background-color': list.enabled? 'green' : 'red'}"> 

またはngClass：付き

<div class="panel panel-primary" 
    [ngClass]="{greenClass: list.enabled, redClass: !list.enabled}"> 

をあなたのコンポーネントの次のスタイル：

@Component({ 
    (...) 
    styles: [ 
    ` 
     .greenClass { background-color: green } 
     .redClass { background-color: red } 
    ` 
    ] 
}) 

Answer 2

あなたはCSSクラスを作成したい - あなたはngStyleディレクティブを活用でき、ngClass

<div class="panel panel-primary" ng-class="{'green-class': list.enabled, 'red-class' : !list.enabled }">