ngClass один условный и другой из переменной

Question

У меня следующая структура данных:

  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 не работает, он работает, если я удаляю первый, но я не могу управлять обоими одновременно.

Как это сделать?

Answer 1

Я наконец решил это, добавив div:

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