排序数组出现错误，例如无法读取未定义的属性（读取“排序”）

Question

我设置了排序管道。它正在排序，但我得到了这种类型的错误：

无法读取未定义的属性（读取“排序”）

在我本地运行的 angular core.js 中。

这是我的订单-by.pipe.ts

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

@Pipe({
  name: 'orderBy',
})
export class OrderByPipe implements PipeTransform {
  transform(array: any, field: string): any[] {
    array.sort((a: any, b: any) => {
      if (a[field] < b[field]) {
        return -1;
      } else if (a[field] > b[field]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Answer 1

您需要检查array 必须具有值，然后才继续进行排序。

同时，您应该将array指定为any[]类型，因为sort()是Array提供的方法。

解决方案 1

当array 为空时直接中断函数（null 或undefined）。

transform(array: any[], field: string): any[] {
  if (!array) return array;

  array.sort((a: any, b: any) => {
    if (a[field] < b[field]) {
      return -1;
    } else if (a[field] > b[field]) {
      return 1;
    } else {
      return 0;
    }
  });

  return array;
}

Sample Solution 1 on StackBlitz

---

解决方案 2

使用Typescript optional chaining 以便.sort() 在array 为空时不会被执行（null 或undefined）。

transform(array: any[], field: string): any[] {
  array?.sort((a: any, b: any) => {
    if (a[field] < b[field]) {
      return -1;
    } else if (a[field] > b[field]) {
      return 1;
    } else {
      return 0;
    }
  });
  
  return array;
}

Sample Solution 2 on StackBlitz