Angular 指令选择器无法将图标应用到元素

Question

我正在尝试做类似于此应用程序的事情：

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

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 });
  }
}

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

Answer 1

如果您检查呈现的<th>元素：

<th _ngcontent-hpt-c62="" scope="col" ng-reflect-sortable="Tercih"> Tercih </th>

没有sortable属性，而您的SortableHeaderDirective应用于具有sortable属性的<th>元素： 'th[sortable]' 。

使用sortable="{{ item.content }}"或[sortable]="item.content"用作属性绑定。

您可以执行以下任一操作来添加sortable属性：

1. 添加无字符串插值的sortable 。

2. 添加[attr.sortable]="item.content" 。

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

演示 @ StackBlitz

Answer 2

HTML：

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

指示：

@Directive({
  selector: 'div[sortable]',
  host: {
    '[class.sorting]': 'true',
    '[class.sorting-desc]': 'direction === "asc"',
    '[class.sorting-asc]': 'direction === "desc"',
    '(click)': 'rotate()',
  },
})