Question

我需要在表列标题中添加超棒的人字形图标以对数据进行排序。虽然我能够完成排序功能，但是在单击时无法将Chevorn图标正确地向上/向下更改。最初，这些图标需要显示在所有列标题上，而当我们单击特定的标题时，只需将该图标更改为上/下即可。到目前为止，我已经尝试了下面的代码，并且影响了所有列。

HTML

<table>
   <thead>
    <tr>
      <th class="headerClass" *ngFor="let header of tableHeaders" (click)="sortColumn(header)">
        <table>
          <tr>
            <td>{{header}}</td>
            <td>
                <i class="fa fa-chevron-up" *ngIf="sortDirection === 'asc' && sortBy === header" ></i>
                <i class="fa fa-chevron-down" *ngIf="sortDirection === 'desc' && sortBy === header"></i>
            </td>
          </tr>
        </table>
      </th>
    </tr>
</thead>

TypeScript

sortBy: string = '';
sortDirection: string = 'desc';

sortColumn(headerName: string) {
    if (this.sortBy === headerName) {
      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
    }
    this.sortBy = headerName;
}

编辑-每当我点击排序图标时，我就会访问后端服务以检索新数据。

Answer 1

您必须将tableHeaders对象更改为具有2个属性，例如：

header = {
  name : something,
  direction : none ,
};

然后使用：

 <th class="headerClass" *ngFor="let header of tableHeaders" (click)="sortColumn(header)">
    <table>
      <tr>
        <td>{{header.name}}</td>
        <td>
            <i class="fa fa-default-icon-you-want-for-table-headers" *ngIf="header.direction === 'none'"></i>
            <i class="fa fa-chevron-up" *ngIf="header.direction === 'asc'&& sortBy === header.name" ></i>
            <i class="fa fa-chevron-down" *ngIf="header.direction === 'desc'&& sortBy === header.name"></i>
        </td>
      </tr>
 </th>

您的功能将类似于：

sortColumn(header: any) {
if (this.sortBy === header.name) {
  header.direction= header.direction === 'asc' ? 'desc' : 'asc';
}

this.sortBy = header.name;
}

Angular 5-在列标题上单击以更改Chevron

1 个答案: