Angular自定义SortPipe传递courseAssignment.category排序参数无效求助

问题根因 #

• 当前的SortPipe仅支持读取对象的一级属性，传入带.的嵌套字段路径时，a[sortField]会直接把整个路径字符串当作键名去查找，无法递归获取嵌套属性，自然返回undefined，排序也就不生效
• 点击事件里设置的排序字段路径写错了，多了前缀courses.，正确路径应该是courseAssignment.category

修复方案 #

1. 改造SortPipe，支持嵌套属性读取

新增嵌套属性取值逻辑，同时如果需要排序参数修改后即时生效，可将管道设置为非纯模式，修改后代码如下：

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

@Pipe({
  name: 'sort',
  // 非纯管道配置，保证参数变更时自动重新执行排序；如果不想用非纯管道，也可以每次修改排序参数后浅拷贝一次courseList数组触发变更检测
  pure: false
})
export class SortPipe implements PipeTransform {
  transform(value: Array<courses>, args: any[]): Array<courses> {
    // 边界判断，避免空值报错
    if (!value || !args || args.length < 2) return value;
    const sortField = args[0];
    const sortDirection = args[1];
    let multiplier = 1;

    if (sortDirection === 'desc') {
      multiplier = -1;
    }

    // 新增嵌套属性读取方法
    const getNestedValue = (obj: any, path: string) => {
      return path.split('.').reduce((current, key) => current?.[key], obj);
    };
        
    value.sort((a: courses, b: courses) => {
      const valA = getNestedValue(a, sortField);
      const valB = getNestedValue(b, sortField);
      if (valA < valB) {
        return -1 * multiplier;
      } else if (valA > valB) {
        return 1 * multiplier;
      } else {
        return 0;
      }       
    });

    return value;
  }  
}

2. 修正点击事件的排序字段路径

去掉多余的courses.前缀，修改后代码如下：

onSortbyParam() {
    this.SortbyParam = 'courseAssignment.category';
    this.SortDirection = 'asc';
}

onSortbyParam1() {
    this.SortbyParam = 'courseAssignment.category';
    this.SortDirection = 'desc';
}

内容的提问来源于stack exchange，提问作者M D V Ajay kumar 360