我有这个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>
现在,我将在我的面板 – 主要模板中设置不同的颜色:如果“启用”:true,则设置绿色,如果“启用”:false,则设置红色.这是怎么回事?用ngIf = …?或者是其他东西?
您可以利用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 } ` ] })