एनजी अगर रंग सेट करने के लिए?

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

वर्ग टॉगल आप का लाभ उठाने सकता है ngStyle निर्देश:

<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 वर्ग बना सकते हैं - और के माध्यम से ngClass

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