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