Angular列表动态排序失效及表头排序箭头实现求助

问题1：按传入列名排序，兼容数值与字符串类型 #

问题根源 #

原代码存在两个核心问题：

1. 未使用传入的列名参数，硬编码了固定字段（如a.value/a.id），无法动态切换排序列；
2. 未区分数据类型，字符串用减法排序会返回NaN，导致排序失效。

修复方案 #

1. 在组件类中新增状态变量，记录当前排序列和方向：

// 组件类中定义
currentSortColumn: string = '';
sortDirection: 'asc' | 'desc' = 'asc';

2. 修改sortData方法，支持动态列名+多类型兼容：

sortData(columnName: string) {
  // 切换排序逻辑：点击同一列反转方向，点击新列默认升序
  if (this.currentSortColumn === columnName) {
    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
  } else {
    this.currentSortColumn = columnName;
    this.sortDirection = 'asc';
  }

  // 按列名+方向排序
  this.tableInformation.sort((a, b) => {
    const valA = a[columnName];
    const valB = b[columnName];

    // 数值类型排序
    if (!isNaN(valA) && !isNaN(valB)) {
      return this.sortDirection === 'asc' ? valA - valB : valB - valA;
    }
    // 字符串类型排序（支持中文等非英文语言）
    else if (typeof valA === 'string' && typeof valB === 'string') {
      return this.sortDirection === 'asc' 
        ? valA.localeCompare(valB, undefined, { sensitivity: 'base' }) 
        : valB.localeCompare(valA, undefined, { sensitivity: 'base' });
    }
    // 其他类型默认不排序
    return 0;
  });

  // 触发Angular变更检测（重新赋值数组）
  this.tableInformation = [...this.tableInformation];
}

问题2：表头添加排序方向箭头 #

实现思路 #

通过*ngIf判断当前排序列和方向，在表头后显示对应箭头（可使用Ionic图标或纯文本符号）。

HTML代码示例 #

<thead>
  <tr>
    <th 
      *ngFor="let column of columnsHeader.controls" 
      (click)="sortData(column.name)"
      style="cursor: pointer;"
    >
      <!-- 表头文本 -->
      {{ column.label }}
      <!-- 排序箭头：仅当前排序列显示 -->
      <span *ngIf="currentSortColumn === column.name">
        <!-- 方案1：使用Ionic图标 -->
        <ion-icon *ngIf="sortDirection === 'asc'" name="arrow-up-sharp"></ion-icon>
        <ion-icon *ngIf="sortDirection === 'desc'" name="arrow-down-sharp"></ion-icon>
        
        <!-- 方案2：纯文本符号（无需依赖图标库） -->
        <!-- {{ sortDirection === 'asc' ? '↑' : '↓' }} -->
      </span>
    </th>
  </tr>
</thead>

说明 #

• 给<th>添加cursor: pointer样式，提示用户可点击；
• 若使用Ionic图标，需确保已导入对应图标包。

内容的提问来源于stack exchange，提问作者Doncarlito87