Angular 2: Bind Klasse nur zu ausgewählten Element [ngClass]

Question

Ich zeige Pfeile in einer Header-Tabelle mit Symbolen aus Bootstrap, das Problem ist, wenn ich auf eine Spalte klicken alle Spalten erhalten die Symbol-Klasse hier ist was zu reden über:

Dies ist der Code:

HTML ->

<table class="table table-hover"> 
<thead> 
    <th (click)="orderBy('username')">Username<span [ngClass]="displayArrow()"></span></th> 
    <th (click)="orderBy('email')">Email<span [ngClass]="displayArrow()"></span></th> 
    <th (click)="orderBy('id')">Id<span [ngClass]="displayArrow()"></span></th> 
    <th (click)="orderBy('roleId')">Role Id<span [ngClass]="displayArrow()"></span></th> 
</thead> 
<tbody> 
    <tr *ngFor="let user of usersListData | orderByController: OrderByParams"> 
     <td (click)="onSelectFilterParam(user.username)">{{user.username}}</td> 
     <td (click)="onSelectFilterParam(user.email)">{{user.email}}</td> 
     <td (click)="onSelectFilterParam(user.id)">{{user.id}}</td> 
     <td (click)="onSelectFilterParam(user.roleId)">{{user.roleId}}</td> 
    </tr> 
</tbody> 

AppComponent ->

private toggleArrow = 0; 

orderBy(columnName: string) { 
    this.toggleArrow++; 
    if(this.toggleArrow > 2) { 
     this.toggleArrow = 0; 
    } 
    console.log(this.toggleArrow); 
} 

displayArrow() { 
    if(this.toggleArrow === 0) { 
     return ''; 
    } 
    else if(this.toggleArrow === 1) { 
     return 'glyphicon glyphicon-chevron-up'; 
    } 
    else if(this.toggleArrow === 2) { 
     return 'glyphicon glyphicon-chevron-down'; 
    } 
} 

Es ist möglich, nur die Klasse an ein Element zu binden?

Answer 1

Dies ist vielleicht nicht die eleganteste Lösung, aber Sie können so etwas tun, indem Sie die Spalten in Ihrer Komponente deklarieren.

columns: any[] = [ 
     {'Name':'username','Direction':0}, 
     {'Name':'email','Direction':0}, 
     {'Name':'id','Direction':0}, 
     {'Name':'roleId','Direction':0} 
    ] 

in Ihrem HTML könnten Sie so etwas tun:

<table class="table table-hover"> 
<thead> 
    <th *ngFor="let col of columns" (click)="orderBy(col.Direction)">{{ col.Name }}<span [ngClass]="displayArrow(col.Direction)"></span></th> 
</thead> 
<tbody> 
    <tr *ngFor="let user of usersListData | orderByController: OrderByParams"> 
     <td (click)="onSelectFilterParam(user.username)">{{user.username}}</td> 
     <td (click)="onSelectFilterParam(user.email)">{{user.email}}</td> 
     <td (click)="onSelectFilterParam(user.id)">{{user.id}}</td> 
     <td (click)="onSelectFilterParam(user.roleId)">{{user.roleId}}</td> 
    </tr> 
</tbody> 

SortiertNach dann

orderBy(dir: number) { 
    dir++; 
    if(dir > 2) { 
     dir = 0; 
    } 
    console.log(dir); 
} 

und schließlich die displayClass()

displayArrow(dir: number): string { 
    if(dir === 0) { 
     return ''; 
    } 
    else if(dir === 1) { 
     return 'glyphicon glyphicon-chevron-up'; 
    } 
    else if(dir === 2) { 
     return 'glyphicon glyphicon-chevron-down'; 
    } 
}