Angular 2 - Setklasse nach Attributwert

Question

Lassen Sie uns sagen, dass ich ein paar Knöpfe haben eine Liste zu sortieren:

<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> 

ich den Wert jeder Taste bin mit (‚id‘, ‚name‘ & ' alter ') zweimal - für das Click-Ereignis und um die' aktive 'Klasse zu setzen. Ich möchte, dass dieser Wert an einem einzigen Ort festgelegt wird - ich dachte an eine Attibute. So etwas -

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

Aber es funktioniert nicht.

Ist es auf andere Weise möglich?

Dank

Answer 1

I'recommend Sie solche Wiederholung Element über *ngFor zu machen, so wird Ihr Modell gehört zur Komponente.

<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; 
}