Javascript 如何在表排序标题上添加箭头类？

我正在尝试对表格标题进行排序。我能够利用这一点，但我想在点击标题（asc/desc）上添加箭头，或者可能添加一个类来切换，我可以从css中进行切换

sort(property) {
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    let direction = this.isDesc ? 1 : -1;

    this.records.sort(function (a, b) {
      if (a[property] < b[property]) {
        return -1 * direction;
      }
      else if (a[property] > b[property]) {
        return 1 * direction;
      }
      else {
        return 0;
      }
    });
  };

排序（属性）{
this.isDesc=！this.isDesc；//更改方向
this.column=属性；
设方向=this.isDesc？1:-1；
this.records.sort（函数（a，b）{
if（a[属性]b[属性]）为else{
返回1*方向；
}
否则{
返回0；
}
});
};

谢谢你的帮助

新年快乐

在css中：

.pointer.active.desc:after {
  content: "▲";
}
.pointer.active.asc:after {
  content: "▼";
}

在模板中：

<div class="form-group">
    <div class="col-md-6">
        <input type="text" [(ngModel)]="searchText"
           class="form-control" placeholder="Search By Category" />
  </div>
    </div>

    <div class="col-md-12">
        <table class="table table-responsive table-hover">
            <tr>
                <th [ngClass]="{pointer: true, active:column=='CategoryID',desc:isDesc, asc:!isDesc}"
                    (click)="sort('CategoryID')">
                    Category ID</th>
                <th [ngClass]="{pointer: true, active:column=='CategoryName',desc:isDesc, asc:!isDesc}"
                    (click)="sort('CategoryName')">
                    Category</th>
                <th [ngClass]="{pointer: true, active:column=='Description',desc:isDesc, asc:!isDesc}"
                    (click)="sort('Description')">
                    Description</th>
            </tr>
            <tr *ngFor="let item of records | category : searchText">
                <td>{{item.CategoryID}}</td>
                <td>{{item.CategoryName}}</td>
                <td>{{item.Description}}</td>
            </tr>
        </table>
    </div>

类别ID
类别
描述
{{item.CategoryID}
{{item.CategoryName}
{{item.Description}

---

您可以创建一个方法来为标题获取正确的符号

在类中，创建以下方法：

arrow(columnName) {
  if (this.column === columnName) {
    return this.isDesc ? '↑' : '↓';
  }
  return '';
}

在模板中，将每个标题更改为：

<th class="pointer" (click)="sort('CategoryID')">
    Category ID
    <span [innerHTML]="arrow('CategoryID')"></span>
</th>

类别ID

---

每个标题上都是相同的

我不知道这段代码与箭头有什么关系。如果你想要箭头。你可以使用像Fontsome这样的服务。他们有很多免费的图标供选择。您可以将它们直接插入html中。