angulaire 2 - classe ensemble selon la valeur de l'attribut

Question

Disons que j'ai quelques boutons pour trier une liste:

<a class="order-by" href="#" (click)="Sort('id')" [ngClass]="{active: sortBy==='id'}">Id</a> 
<a class="order-by" href="#" (click)="Sort('name')" [ngClass]="{active: sortBy==='name'}">Name</a> 
<a class="order-by" href="#" (click)="Sort('age')" [ngClass]="{active: sortBy==='age'}">Age</a> 

J'utilise la valeur de chaque bouton (« id », « nom » & ' age ') deux fois - pour l'événement click et pour définir la classe' active '. Je voudrais que cette valeur soit définie dans un seul endroit - j'ai pensé à un attirbute. Quelque chose comme ça -

<a class="order-by" href="#" [attr.sorting-value]="id" (click)="Sort([attr.sorting-value])" [ngClass]="{active: sortBy===[attr.sorting-value]}">Id</a> 

Mais ça ne fonctionne pas.

Est-ce possible d'une autre manière?

Merci

Answer 1

I'recommend vous pour rendre cet élément par la répétition *ngFor, de sorte que votre modèle appartient au composant.

<a class="order-by" href="#" 
    *ngFor="let item of list" 
    (click)="Sort(item.name)" [ngClass]="{ 'active': isActive(item.name) }"> 
{{item.description}} 
</a> 

code

list = [ 
    {name: 'id', description: 'Id'}, 
    {name: 'name', description: 'Name'}, 
    {name: 'age', description: 'Age'}, 
]; 

isActive(name: string){ 
    return name === this.sortBy; 
}