时间戳

首页 > 解决方案 > ngClass 一个条件和其他来自变量

css - ngClass 一个条件和其他来自变量

问题描述

我有以下数据结构：

  this.filters = [
  {
    key: 'filter1',
    active: true,
    class: 'filter1Class'
  },
  {
    key: 'filter2',
    active: false,
    class: 'filter2Class'
  },
  {
    key: 'filter3',
    active: true,
    class: 'filter3Class'
  }
];

有了这个，我想在我的 html 中创建一些图标，每个图标都有自己的 css 类，并且可以根据模型中的活动标志启用或不启用它。

我的类非常简单，每一个filterNClass都只是一种颜色，我应用它来设置它启用或不透明度值：

.disabled {
   opacity: 0.2;
}

.filter1Class {
   color: #1993a0;
}

.filter2Class {
   color: #720053;
}

.filter3Class {
   color: #000055;
}

这是我的html：

<div *ngFor="let filter of filters">
  <mat-icon [ngClass]="filter.class"
            [ngClass]="{disabled: !filter.active}">alarm_on
  </mat-icon>
</div>

这样，第二个ngClass不起作用，如果我删除第一个，它会起作用，但我无法同时管理两者。

如何做呢？

标签： csssassng-class

解决方案

我终于通过包含一个div来解决它：

<div *ngFor="let filter of filters">
  <div [ngClass]="filter.class">
    <mat-icon 
        [ngClass]="{disabled: !filter.active}">alarm_on
    </mat-icon>
   </div>
</div>

推荐阅读