Angular2 Sort Pipe问题：a[propName]-b[propName]写法不生效

嘿，我来帮你捋清楚这个问题～

你遇到的核心差异在于两种排序写法的类型兼容性：

为什么注释里的if-else能生效？ #

注释里的代码是直接比较两个值的大小：

if(a[propName]>b[propName]) { return 1; } else { return -1; }

这种写法对字符串类型的值也能工作（按Unicode字符的顺序比较），但有个隐患：如果你的属性值是数字字符串（比如"10"和"2"），它会把"10"排在"2"前面，这显然不是正确的数字排序结果。

为什么return a[propName]-b[propName]不生效？ #

减号运算符要求两边的操作数是数字类型，如果你的a[propName]或b[propName]是字符串（哪怕是看起来像数字的字符串），JavaScript会尝试把它们转成数字：

• 如果转换成功（比如"5"转成5），能正常排序；
• 如果转换失败（比如非数字字符串，或者转换后得到NaN），sort函数会把包含NaN的元素放到数组末尾，看起来就像排序没生效。

解决方案：根据属性类型处理排序 #

情况1：属性值是数字或数字字符串

先把属性值显式转成数字，再做减法：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'sort' })
export class SortPipe implements PipeTransform {
  transform(value: any, propName: string): any {
    return value.sort((a,b)=> {
      // 显式转换为数字，避免字符串干扰
      const valA = Number(a[propName]);
      const valB = Number(b[propName]);
      return valA - valB;
    });
  }
}

情况2：属性值是普通字符串

如果是要对字符串做自然排序，改用localeCompare方法（比直接用>更可靠，支持多语言）：

transform(value: any, propName: string): any {
  return value.sort((a,b)=> {
    return a[propName].localeCompare(b[propName]);
  });
}

情况3：需要同时支持数字和字符串排序

可以加个参数来指定排序类型：

transform(value: any, propName: string, isNumeric: boolean = false): any {
  if (isNumeric) {
    const valA = Number(a[propName]);
    const valB = Number(b[propName]);
    return valA - valB;
  } else {
    return a[propName].localeCompare(b[propName]);
  }
}

使用时如果是数字排序就传true：

<div *ngFor="let item of items | sort:'age':true">{{ item.age }}</div>

最后提醒 #

先检查你的数据源中propName对应的属性值类型，是数字、数字字符串还是普通字符串，再选择对应的排序逻辑，就能解决这个问题啦～

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