Angular 4管道报错：Uncaught TypeError: t.sort is not a function 求排查

构建后生成的vendor.js中出现Uncaught TypeError: t.sort is not a function错误，请问我哪里操作有误？我的sort.pipe.ts代码如下：

// sort.pipe.ts
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({name: 'sortBy'})
export class SortByPipe implements PipeTransform {
  transform(array:Array<any>, args:string, args2:string):Array<string> {
    array = array || [];
    if (array !== undefined) {
      array.sort((a:any, b:any) => {
        if (args2) {
          if (a[args][args2] < b[args][args2]) {
            return -1;
          } else if (a[args][args2] >...

这个错误的核心原因很明确：你调用sort()方法的对象不是一个数组。虽然你写了array = array || []来兜底，但这个判断有漏洞——如果传入的array是对象、字符串这类非数组类型，array || []并不会把它转换成数组，后续调用array.sort()自然就会报错。

给你几个具体的修复步骤：

1. 严格校验输入的数组类型 #

在transform方法最开头先确认输入确实是数组，非数组的话直接返回安全值：

transform(array: Array<any>, args: string, args2: string): Array<any> {
  // 用Array.isArray做严格校验，比array || []更可靠
  if (!Array.isArray(array)) {
    console.warn('SortByPipe接收到了非数组的输入:', array);
    return []; // 或者根据业务需求返回原输入，返回空数组更安全
  }
  
  // 补全完整的排序逻辑，加上可选链避免嵌套属性不存在的问题
  array.sort((a: any, b: any) => {
    const valA = a[args]?.[args2] ?? a[args];
    const valB = b[args]?.[args2] ?? b[args];
    
    if (valA < valB) return -1;
    if (valA > valB) return 1;
    return 0; // 相等时返回0，保证排序稳定性
  });
  
  return array;
}

另外注意：你的方法声明返回Array<string>，但实际处理的是Array<any>，如果数组元素不是字符串，建议把返回类型改成Array<any>或者对应的数据类型，避免类型不匹配的潜在问题。

2. 检查模板中管道的使用场景 #

确保在模板里传入管道的第一个参数确实是数组，比如：

<!-- 正确用法：传入的items是数组 -->
<div *ngFor="let item of items | sortBy: 'category': 'name'">{{ item.name }}</div>

<!-- 错误用法：如果nonArrayData是对象/字符串/未初始化的变量，就会触发错误 -->
<div *ngFor="let item of nonArrayData | sortBy: 'category': 'name'">{{ item.name }}</div>

如果是异步加载的数据（比如从API获取），记得加上async管道或者确保数据加载完成后再使用sortBy管道。

3. 补全排序逻辑的完整性 #

你提供的代码里array.sort的逻辑被截断了（>...），一定要补全完整的判断分支，相等的情况返回0，避免排序结果不稳定。

内容的提问来源于stack exchange，提问作者Rogério Ferreira