angular – ngIf设置颜色？

发布时间：2020-12-17 08:21:29 所属栏目：安全来源：网络整理

导读：我有这个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 clas

我有这个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 }
    `
  ]
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!