Question

我有以下代码：

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

该如何解决？

Answer 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>

字体超赞图标未显示在第nz个

1 个答案: