Angular 10中Full ng-table排序功能异常问题求助：调整指令后表格显示但无法排序

看起来你已经搞定了指令的语法错误，但排序功能失效大概率是因为指令逻辑、类型定义或者父组件的事件处理环节有遗漏。咱们一步步排查修复：

1. 补全rotate映射对象的定义 #

你指令里用到了rotate[this.direction]，但如果没有提前定义这个映射对象，direction的值永远不会正确切换。请在指令类的外部添加这个常量：

// 定义排序方向的切换规则
const rotate: {[key in SortDirection]: SortDirection} = {
  '': 'asc',
  'asc': 'desc',
  'desc': ''
};

@Directive({
  selector: 'th[sortable]' // 注意这里的selector要和模板里的绑定对应
})
export class SortableHeaderDirective {
  // ... 你的其他代码
}

2. 修正@HostBinding的冗余@Input() #

你给ascClass和descClass加了@Input()，这是不必要的——它们的状态完全依赖于direction输入属性，移除@Input()可以避免潜在的绑定冲突：

@Input() sortable: SortColumn = '';
@Input() direction: SortDirection = '';

// 移除@Input()，直接通过HostBinding绑定类名
@HostBinding('class.asc') get ascClass(): boolean {
  return this.direction === 'asc';
}

@HostBinding('class.desc') get descClass(): boolean {
  return this.direction === 'desc';
}

@Output() sort = new EventEmitter<SortEvent>();

@HostListener('click') rotate(): void {
  this.direction = rotate[this.direction];
  this.sort.emit({column: this.sortable, direction: this.direction});
}

3. 确保类型定义正确 #

确认SortColumn、SortDirection和SortEvent的类型符合你的业务数据：

// 排序方向类型
export type SortDirection = '' | 'asc' | 'desc';
// 排序列类型，替换成你的表格数据的键名
export type SortColumn = keyof YourTableDataType | '';
// 排序事件类型
export interface SortEvent {
  column: SortColumn;
  direction: SortDirection;
}

4. 父组件正确处理排序事件 #

排序功能需要父组件订阅指令的sort事件，然后对数据进行排序。示例代码如下：

父组件TS代码 #

import { Component, OnInit } from '@angular/core';
import { Observable, combineLatest, Subject, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { SortEvent, SortDirection, SortColumn } from './sortable-header.directive';

// 替换成你的表格数据类型
interface YourTableDataType {
  id: number;
  name: string;
  age: number;
}

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html'
})
export class YourTableComponent implements OnInit {
  // 原始数据（可以从API获取）
  originalData$: Observable<YourTableDataType[]> = of([
    {id: 1, name: 'Alice', age: 25},
    {id: 2, name: 'Bob', age: 30},
    {id: 3, name: 'Charlie', age: 22}
  ]);
  
  sortEvent$ = new Subject<SortEvent>();
  sortedData$: Observable<YourTableDataType[]>;
  sortDirection: SortDirection = '';
  sortColumn: SortColumn = '';

  ngOnInit() {
    // 组合原始数据和排序事件，实现实时排序
    this.sortedData$ = combineLatest([
      this.originalData$,
      this.sortEvent$
    ]).pipe(
      map(([data, sortEvent]) => {
        if (!sortEvent.column || sortEvent.direction === '') {
          return data;
        }
        // 对数据进行排序
        return [...data].sort((a, b) => {
          const isAsc = sortEvent.direction === 'asc';
          const valueA = a[sortEvent.column];
          const valueB = b[sortEvent.column];
          return this.compareValues(valueA, valueB, isAsc);
        });
      })
    );
  }

  onSort(event: SortEvent) {
    this.sortColumn = event.column;
    this.sortDirection = event.direction;
    this.sortEvent$.next(event);
  }

  // 通用值比较函数
  private compareValues(a: any, b: any, isAsc: boolean): number {
    if (a < b) {
      return isAsc ? -1 : 1;
    }
    if (a > b) {
      return isAsc ? 1 : -1;
    }
    return 0;
  }
}

父组件HTML模板 #

确保模板里正确绑定指令的输入和输出：

<table>
  <thead>
    <tr>
      <!-- 绑定sortable、direction和sort事件 -->
      <th [sortable]="'name'" [direction]="sortDirection" (sort)="onSort($event)">
        Name
      </th>
      <th [sortable]="'age'" [direction]="sortDirection" (sort)="onSort($event)">
        Age
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of sortedData$ | async">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</table>

5. 验证指令的Selector匹配 #

你的指令selector是th[sortable]，所以模板里的th标签必须用[sortable]="'column-name'"的形式绑定，而不是原来的mzSortable属性，这一点要注意对应。

按照以上步骤调整后，排序功能应该就能正常工作了。

内容的提问来源于stack exchange，提问作者Djamel eddine CHAHRAT