角2：選択された要素にちょうどバインドクラス[ngClass]

Question

私はブートストラップからのアイコン付きのヘッダーテーブルに矢印を表示しています。問題は、すべての列をクリックするとアイコンクラスが得られます：これはコードです

：

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

クラスを1つの要素にバインドすることは可能ですか？

Answer 1

これは、最も洗練されたソリューションではないかもしれませんが、コンポーネントの列を宣言することで、このようなことを行うことができます。

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

は、あなたのHTMLでは、あなたはこのような何かを行うことができます：

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

のOrderByは、その後

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