Javascript 角度5-在列标题上上下更改V形，单击

我需要在表格的列标题中添加字体和V形图标来对数据进行排序。虽然我能够完成排序功能，但我无法在单击时将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>

---

编辑-每次点击排序图标时，我都会点击后端服务来检索新数据

您必须将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>

---

必须将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>

---

非常感谢。它在最初的点击中工作，但是，当我点击另一个列标题进行排序时，先前的列标题V形向下图标就消失了（我正在点击后端以获取最新的排序图标点击，该图标会重写标题。我使用了chevron down作为默认图标。这是我唯一做的更改Better soloution将检查每个标题的header.direction，每次从服务器获取sortBy并将其更改为默认值，如果它不等于您想要的，请执行以下操作：getSortBy（）{this.whateverserviceyouuse.getSortBy（）.subscribe（（数据）=>{this.sortBy=data；如果（数据===header.name）{header.direction=header.direction==header.direction=='asc'？'desc'：'asc'；}其他{header.direction=none；}）谢谢。它正在进行初始单击，但是，当我点击另一个列标题进行排序时，前面的列标题V形向下图标就消失了（我正在点击后端以获取最新的排序图标点击，该图标会重写标题。我使用了chevron down作为默认图标。这是我唯一做的更改Better soloution将检查每个标题的header.direction，每次从服务器获取sortBy并将其更改为默认值，如果它不等于您想要的，请执行以下操作：getSortBy（）{this.whateverserviceyouuse.getSortBy（）.subscribe（（数据）=>{this.sortBy=data；如果（数据===header.name）{header.direction=header.direction==header.direction=='asc'？'desc'：'asc'；}其他{header.direction=none；}）