hinzufügen, wenn es bereits einen ngClass Zustand Angular (4)

Question

ich einige Probleme, zu definieren, bestimmte Klassen dynamische Elemente zu tun, werfen Sie einen Blick auf dieser JSON:

filterData = { 
    "highlights": { 
     "title": "Destaques", 
     "options": [{ 
      "id": 1, 
      "title": "Outlet", 
      "alias": "outlet", 
      "counter": 3, 
      "classes": ["outlet", "feb", "jun"] 
     }, { 
      "id": 2, 
      "title": "Novidades", 
      "alias": "news", 
      "counter": 0, 
      "classes": ["news", "may"] 
     }, { 
      "id": 3, 
      "title": "Promoção", 
      "alias": "promo", 
      "counter": 1, 
      "classes": ["promo"] 
     }] 
    } 
} 

Jede Taste hat seine Klasse ausgewählt, je nachdem, ob sie vom Benutzer oder nicht ausgewählt sind:

<div 
    *ngIf="filterEnabled" 
    class="filters_btns" 
> 
    <button 
     *ngFor="let item of filtersList.options" 
     type="button" 
     class="btn" 
     (click)="toggleFilterOption(item)" 
     [ngClass]="{ 'selected': filterData[item.id]" <-- also add all of the classes of this array (item.classes) if some exists 
    >{{ item.title }}</button> 

</div> 

es gibt eine Möglichkeit, dies zu tun? Fügen Sie eine Reihe von Klassen (wenn sie existieren), und fügen Sie auch die ‚ausgewählt‘ Klasse nach dem filter [item.id] (boolean)

Answer 1

Sie die Klasse für die Bindung verwenden:

[class.selected]="filterData[item.id]" 

und die ngClass für Sie Liste:

[ngClass]="item[classes]"