如何对Observable返回的TableData结果进行多条件链式排序

你可以在tableDataRows$的pipe管道中追加排序逻辑，先实现多字段优先级排序方法，再对返回的rows数组做排序处理，完整实现如下：

第一步：编写排序工具方法 #

// 按优先级排序：先employee，再project，默认升序
const sortTableRows = (rows: TableRow[]) => {
  // 排序前先浅拷贝数组，避免修改原数组引发副作用
  return [...rows].sort((a, b) => {
    // 1. 优先比较employee字段，这里用id作为排序依据，也可根据需求替换为姓名拼接逻辑
    const employeeA = a[EMPLOYEE_KEY]?.id ?? '';
    const employeeB = b[EMPLOYEE_KEY]?.id ?? '';
    if (employeeA < employeeB) return -1;
    if (employeeA > employeeB) return 1;
    
    // 2. employee值相等时再比较project字段
    const projectA = a[PROJECT_KEY]?.id ?? '';
    const projectB = b[PROJECT_KEY]?.id ?? '';
    if (projectA < projectB) return -1;
    if (projectA > projectB) return 1;
    
    return 0;
  })
}

如果需要调整为降序排序，把对应判断的返回值1和-1互换即可。

第二步：修改Observable链式调用 #

在原有map操作后追加排序逻辑即可：

tableDataColumns$ = this.activityCollection.groupedEntities$?.pipe(
  map((e) => e.columns)
);
tableDataRows$ = this.activityCollection.groupedEntities$?.pipe(
  map((e) => e.rows),
  map(rows => sortTableRows(rows))
);

如果后续需要支持用户动态选择排序字段，只需要把排序的字段列表提取为参数传入sortTableRows方法，循环判断字段优先级即可。

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