Angular Material 表格无法正确排序数字值问题咨询

你遇到的数字字段排序异常是因为对应字段实际以字符串类型存储/传递：JavaScript默认字符串排序为逐字符对比Unicode编码，"10"的首字符"1"编码小于"2"，因此会出现1、10、2这类不符合数值逻辑的排序结果，字符串字段的排序逻辑不受影响。

方案1：修改前端比较逻辑（快速生效） #

直接调整通用compare函数，增加数字判断分支，合法数值优先按大小比较，不影响原有字符串字段的排序逻辑：

compare(a: number | string, b: number | string, isAsc: boolean) {
  // 尝试转换为数字校验合法性
  const numA = Number(a);
  const numB = Number(b);
  if (!isNaN(numA) && !isNaN(numB)) {
    // 均为合法数字按数值差计算排序权重
    return (numA - numB) * (isAsc ? 1 : -1);
  }
  // 非数字场景保留原有字符串比较逻辑
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

方案2：统一全链路数据类型（更规范） #

• 后端Java Spring Boot接口返回数字字段时，使用数值类型（如Integer、Long）序列化，不要转为字符串
• 前端定义数据模型时，将数字类型字段明确声明为number类型，接收接口返回数据时做好类型转换，从根源避免类型不匹配导致的排序异常

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