ngClass 一个有条件的，另一个来自变量

Question

我有以下数据结构：

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

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

我的 classes 非常简单，每个 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 不起作用，如果我删除第一个，它会起作用，但我无法同时管理两者。

如何做到？

Answer 1

你可以这么写：

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

Answer 2

您将需要使用对象数组语法并将所有检查包含在同一 ngclass 属性下，如下所示：

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

Answer 3

我终于解决了它，包括一个 div:

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

ngClass 一个有条件的，另一个来自变量

ngClass one conditional and other from variable

css

sass

ng-class