Angular排序指令兼容null值：修复含空值数据的排序异常

你的排序函数遇到null值就失效，核心原因是当字段值为null时，直接调用toLowerCase()会抛出错误，而且完全没处理null值的排序优先级。下面是修复后的完整函数，我会拆解关键修改点帮你理解：

sortArray(): Array<any> {
  // 重要：不要直接引用原数组！创建副本避免修改原始数据产生副作用
  let tempArray: Array<any> = [...this.data]; 
  tempArray.sort((a, b) => {
    const aVal = a[this.key];
    const bVal = b[this.key];

    // 优先处理null/undefined的情况，避免后续报错
    if (aVal === null || aVal === undefined) {
      // 升序时null排最前，降序时排最后，可根据需求调整返回值
      return this.toggleSort ? -1 : 1;
    }
    if (bVal === null || bVal === undefined) {
      return this.toggleSort ? 1 : -1;
    }

    // 非null值再执行字符串小写转换和比较
    const str1 = aVal.toLowerCase();
    const str2 = bVal.toLowerCase();

    // 用localeCompare简化比较逻辑，还支持多语言排序规则
    return this.toggleSort ? str1.localeCompare(str2) : str2.localeCompare(str1);
  });
  return tempArray;
}

关键修改说明： #

• 保护原数组：原来的let tempArray: Array<any> = this.data;是直接引用原数组，排序会修改原始数据，改成[...this.data]创建副本更符合Angular的数据流向规范。
• 前置null判断：在调用任何字符串方法前先拦截null/undefined，根据当前排序方向（toggleSort）定义它们的位置——这里默认升序时null排在最前，降序时排在最后，你可以互换返回值让null排到相反位置。
• 简化字符串比较：用localeCompare替代手动的str1 < str2判断，不仅代码更简洁，还能处理多语言字符串的排序边缘case。
• 安全取值：先把字段值存到变量再处理，让代码逻辑更清晰，也避免重复访问对象属性。

如果你的场景需要区分null和undefined，或者想要自定义null的排序优先级，只需要调整null判断分支的返回值即可。

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