如何对Angular项目表格中字符串类型的数字Quantity列进行前端排序

核心逻辑 #

因为Quantity字段是字符串类型，还包含N/A这类非数字特殊值，排序时需要先做值的转换和权重预处理，再执行数值排序，不需要修改后端返回的原始数据类型。

步骤1：修改HTML模板，绑定点击排序事件 #

给表头添加点击触发排序的逻辑，同时可按需展示排序方向标识：

<th *ngIf="searchViewSettings?.fields?.quantity" scope="col" class="link" (click)="sortByQuantity()">
  <responsive-text large="Quantity"></responsive-text>
  <!-- 可选：展示排序方向标识 -->
  <span *ngIf="sortKey === 'quantity'">
    {{ sortDirection === 'asc' ? '↑' : '↓' }}
  </span>
</th>

步骤2：在组件TS中定义排序相关变量 #

// 排序字段标识
sortKey: string = '';
// 排序方向：升序/降序
sortDirection: 'asc' | 'desc' = 'asc';
// 表格原始数据源，替换为你自己的数据源变量
tableData: any[] = [];
// 绑定到表格渲染的数据源
renderData: any[] = [];

步骤3：实现排序处理函数 #

排序逻辑中优先处理非数字值的排序优先级，示例默认升序时N/A排在最后，降序时排在最前，可按需调整权重：

sortByQuantity() {
  // 切换排序方向：如果当前排序字段已经是quantity，点击就反转方向，否则默认升序
  if (this.sortKey === 'quantity') {
    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
  } else {
    this.sortKey = 'quantity';
    this.sortDirection = 'asc';
  }

  // 执行排序
  this.renderData = [...this.tableData].sort((a, b) => {
    // 把两个比较值转成数字，转失败的（比如N/A）赋值为无穷大
    const valA = isNaN(Number(a.Quantity)) ? Infinity : Number(a.Quantity);
    const valB = isNaN(Number(b.Quantity)) ? Infinity : Number(b.Quantity);

    // 按方向返回比较结果
    if (this.sortDirection === 'asc') {
      return valA - valB;
    } else {
      return valB - valA;
    }
  });
}

特殊场景调整 #

• 如果需要N/A排在最前面，把Infinity改成-Infinity即可
• 如果有其他需要特殊处理的非数字值，可在转换逻辑中单独定义权重值
• 如果使用的是Angular Material表格，只需要把上述比较逻辑替换到matSort的自定义排序函数中即可

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