ngClass一个条件，另一个来自变量
提问于 2020-02-28 07:09:33
我有以下数据结构：
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就不能工作了，如果我删除了第一个，它就会工作，但是我不能同时管理两者。
怎么做呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-03-01 23:46:32
我最终解决了这个问题，包括一个div：
<div *ngFor="let filter of filters">
<div [ngClass]="filter.class">
<mat-icon
[ngClass]="{disabled: !filter.active}">alarm_on
</mat-icon>
</div>
</div>Stack Overflow用户
发布于 2020-02-28 07:40:53
你可以这样写：
<div *ngFor="let filter of filters">
<mat-icon [ngClass]="{disabled: !filter.active,filter.class }">alarm_on
</mat-icon>
</div>Stack Overflow用户
发布于 2020-02-28 07:50:11
您将需要使用对象数组语法，并将所有检查包含在相同ngclass属性下，如下所示：
<div *ngFor="let filter of filters">
<mat-icon [ngClass]="{filter.class : true, 'disabled' : !filter.active }">alarm_on
</mat-icon>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60454435
复制相关文章
![[124]linux常用命令(创建|重命名|删除)文件和文件夹](https://ask.qcloudimg.com/http-save/yehe-4908043/f4b2caccf069322d79eff23930a7aad4.png)
腾讯云开发者
