javascript - Angular 5 - 在列标题上单击上下更改 V 形

Question

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

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