0

我有以下代码：

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

如何解决这个问题？

4

1 回答 1

0

您是否尝试过在<i>标签中使用 nz-icon 指令？对我来说，它只在我这样做时显示我的图标。这也是它在自定义过滤器面板演示中使用的内容，它在其中手动插入了一个图标。

<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>
于 2020-01-28T11:50:13.043 回答