我正在尝试做一些类似于这个应用程序的事情：
https://stackblitz.com/edit/angular-table-sort-and-filter?file=src%2Fapp%2Fapp.component.ts
这是我的申请表：
https://stackblitz.com/edit/angular-table-sort-and-filter-w9hrc3?file=src%2Fapp%2Fapp.component.html
超文本：

<thead class="thead-light">
            <tr>
              <th
                *ngFor="let item of list.table.headings; let i = index"
                scope="col"
                sortable="{{ item.content }}"
                (sort)="onSort($event, i)"
              >
                {{ item.content }}
              </th>
            </tr>
</thead>

指令：

export type SortColumn = string | '';
export type SortDirection = 'asc' | 'desc' | '';

const rotate: { [key: string]: SortDirection } = {
  asc: 'desc',
  desc: '',
  '': 'asc',
};

export const compare = (
  v1: string | number | boolean | Date,
  v2: string | number | boolean | Date
) => (v1 < v2 ? -1 : v1 > v2 ? 1 : 0);

export interface SortEvent {
  column: SortColumn;
  direction: SortDirection;
}

@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()',
  },
})
export class SortableHeaderDirective {
  @Input() sortable: SortColumn = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({ column: this.sortable, direction: this.direction });
  }
}

在原始代码中，当用户点击表格的标题时，会出现一个向上和一个向下的图标（第一个链接），但在我的代码中，它没有出现。我不知道我做错了什么。