nz-th 中不显示字体真棒图标答案

【问题标题】：Font awesome icon doesn't display in the nz-thnz-th 中不显示字体真棒图标
【发布时间】：2019-12-03 15:57:42
【问题描述】：

我有以下代码：

<th [ngSwitch]="sortIcon" nz-th class="centered" (click)="toggleSortOrder()" nzSort="Stopped">Sort
      <i *ngSwitchCase="sortEnum.NoSort" class="fa fa-lg fa-fw fa-sort"></i>
      <i *ngSwitchCase="sortEnum.Asc" class="fa fa-lg fa-fw fa-sort-asc"></i>
      <i *ngSwitchCase="sortEnum.Desc" class="fa fa-lg fa-fw fa-sort-desc"></i>
    </th>

toggleSortOrder() {
    this.sortOrder === 2 ? this.sortOrder = 0 : this.sortOrder++;
    switch (this.sortOrder) {
      case 0:
        this.sortIcon = SortEnum.NoSort;
        return;
      case 1:
        this.sortIcon = SortEnum.Asc;
        return;
      case 2:
        this.sortIcon = SortEnum.Desc;
    }
  }

  sortOrder = 0;
  sortIcon = SortEnum.NoSort;
  sortEnum = SortEnum;

export enum SortEnum {
  NoSort, Asc, Desc
}

显然，我想显示排序图标。不知为何不显示。 FA 样式很好 - 当我在它显示的表格正文中测试相同的 <i> 标记时。切换也有效。我签入开发工具：

<th _ngcontent-c10="" class="centered" nz-th="" nzsort="Stopped" ng-reflect-ng-switch="2" ng-reflect-nz-sort="Stopped"><a class="sort-link">Sort</a></th>

如何解决这个问题？

【问题讨论】：

标签： angular ng-zorro-antd

【解决方案1】：

您是否尝试过在 <i> 标签中使用 nz-icon 指令？对我来说，它只在我这样做时显示我的图标。这也是它在customized filter panel demo 中使用的，它在其中手动插入了一个图标。

<i nz-icon *ngSwitchCase="sortEnum.NoSort" class="fa fa-lg fa-fw fa-sort"></i>
<i nz-icon *ngSwitchCase="sortEnum.Asc" class="fa fa-lg fa-fw fa-sort-asc"></i>
<i nz-icon *ngSwitchCase="sortEnum.Desc" class="fa fa-lg fa-fw fa-sort-desc"></i>

【讨论】：