ngJeśli chcesz ustawić kolor?

Question

mam ten json:

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

i pokazać te dane w moim szablonu 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> 

A teraz chciałbym ustawić inny kolor na moim panel-primary w szablonie: jeśli "enabled": true, niż ustawić kolor zielony, a jeśli "enabled": false, ustawić czerwony kolor. Jak to zrobić? z ngIf=...? Albo coś innego?

Answer 1

Można wykorzystać dyrektywę ngStyle:

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

lub ngClass:

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

Z następujące style w twoim komponencie:

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

Answer 2

Można by utworzyć klasę CSS - i przełączyć klasę poprzez ngClass

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