PrimeNG表格排序异常：数字字段按字符串排序问题

我一眼就看出问题出在哪了——你的数字类型字段（比如offer_id、pcs）在数据源里都是字符串格式的！PrimeNG的表格排序默认是基于字段的原始数据类型来比较的，字符串类型的数字自然会按照字典序来排序，就会出现1,10,11...2,3这种异常顺序。

下面给你两种实用的解决思路，按需选择：

方法一：修正数据源的数据类型（推荐） #

最根本的解决办法是把这些数字字段转换成数值类型（number），这样PrimeNG就能自动按数字大小正确排序了。

修改你的.ts文件里的incomingbookings数据，把字符串类型的数字改成纯数值：

this.incomingbookings = [
  {"offer_id": 1,"booking_id":"12345","shipper_info":[{"name":"hemanth","ratings":"4"}],"pcs": 123,"weight": 123,"volume": 123,"volume_weight": 123,"chargeable_weight":""},
  {"offer_id": 2,"booking_id":"123455","shipper_info":[{"name":"hemanth","ratings":"3.5"}],"pcs": 1,"weight": 123,"volume": 123,"volume_weight": 123,"chargeable_weight":""},
  // ... 其他数据同理，去掉offer_id、pcs、weight这些字段的引号，改成数值格式
];

如果数据是从后端接口获取的，记得在接收数据后做批量类型转换：

// 假设接口返回数据存在response.data中
this.incomingbookings = response.data.map(item => ({
  ...item,
  offer_id: Number(item.offer_id),
  pcs: Number(item.pcs),
  weight: Number(item.weight),
  volume: Number(item.volume),
  volume_weight: Number(item.volume_weight)
}));

方法二：自定义排序函数 #

如果因为业务限制不能修改数据源类型，可以给PrimeNG表格配置自定义排序比较器，强制指定数字字段按数值逻辑排序。

首先在组件类里定义通用的数字排序比较函数：

// 数字字段的自定义排序比较器
numericSortComparator(value1: any, value2: any) {
  const num1 = Number(value1);
  const num2 = Number(value2);
  return num1 - num2;
}

然后在cols数组里给需要特殊处理的列绑定这个函数：

this.cols = [
  { field: 'offer_id', header: 'Offer ID', sortFunction: this.numericSortComparator },
  { field: 'booking_id', header: 'Booking ID' },
  { field: 'shipper_info', header: 'Shipper Info' },
  { field: 'pcs', header: 'pcs', sortFunction: this.numericSortComparator },
  { field: 'weight', header: 'Weight', sortFunction: this.numericSortComparator },
  // ... 其他列按需配置
];

最后在模板里给表头绑定sortFunction属性：

<th *ngFor="let col of columns" [pSortableColumn]="col.field" [sortFunction]="col.sortFunction">
  {{col.header}}
  <p-sortIcon [field]="col.field"></p-sortIcon>
</th>

验证效果 #

不管用哪种方法，完成修改后再点击排序按钮，数字字段就会按照数值大小正常升序/降序排列，不会再出现字典序的混乱了。

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