ngIst eine Farbe eingestellt?

Question

Ich habe dieses json:

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

und ich zeigen diese Daten in meiner Vorlage mit 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> 

Und jetzt, ich auf andere Farbe auf meinem panel-primary in Vorlage setzen würde: wenn "enabled": true, als eine grüne Farbe einstellen, und wenn "enabled": false, eine rote Farbe einstellen. Wie geht das? mit ngIf=...? Oder etwas anderes?

Answer 1

Sie konnten die ngstyle Richtlinie nutzen:

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

oder ngClass:

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

Mit die folgenden Stile in Ihrer Komponente:

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

Answer 2

Sie würden eine CSS-Klasse erstellen - und drücken Sie dann die Klasse über ngClass

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