Angular 2：仅将类绑定到选定元素 [ngClass]答案

【问题标题】：Angular 2: Bind class just to selected element [ngClass]Angular 2：仅将类绑定到选定元素 [ngClass]
【发布时间】：2016-10-13 14:09:03
【问题描述】：

我在带有来自引导程序的图标的标题表中显示箭头，问题是当我点击一列时，所有列都得到图标类这里是在谈论什么：

这是代码：

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>

应用组件->

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

可以只将类绑定到一个元素吗？

【问题讨论】：

可以。你最后想要什么？告诉我们。
我希望箭头只显示在点击的列中，而不是像上图那样。

标签： twitter-bootstrap angular typescript binding

【解决方案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 将是

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

最后是 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';
    }
}

【讨论】：