Angular 7 对象数组动态排序：新增元素按当前规则排序问题

看起来你已经离解决问题很近了！现在的核心问题是你的sortingCriteria只记录了排序字段，但没保存排序方向（升序/降序），而且缺少一个通用的排序函数来根据这个规则对列表进行排序——这就是为什么你新增元素时只能写死按name排序，没法复用已有的规则。

下面是具体的解决步骤：

1. 完善排序规则的存储结构 #

首先，把sortingCriteria从单纯的字段名改成包含字段名和排序方向的对象，这样能完整保存当前的排序状态：

// 初始化默认排序规则，比如按name升序
this.sortingCriteria = { field: 'name', order: 'ASC' };

2. 更新排序事件处理方法 #

修改你的sortGrid方法，在保存排序字段的同时，也保存排序方向（大部分UI组件的排序事件都会返回order属性，比如PrimeNG的SortEvent）：

sortGrid(event) { 
  // 完整保存排序字段和方向
  this.sortingCriteria = { 
    field: event.field, 
    order: event.order || 'ASC' // 兜底默认升序
  }; 

  // 原来的列选中逻辑可以保留，这里用find替代filter更高效
  if (this.list && this.cols?.length) { 
    const col = this.cols.find(x => x.field === event.field); 
    if (col) { 
      this.colIndexSelected = col.colIndex; 
    } 
  } 

  // 排序后直接对现有列表应用规则
  this.sortList();
}

3. 编写通用排序函数 #

创建一个sortList函数，它会根据当前的sortingCriteria自动生成对应的比较逻辑，这样不管是网格排序还是新增元素后排序，都能复用同一套规则：

sortList() {
  // 边界情况直接返回
  if (!this.list || this.list.length <= 1 || !this.sortingCriteria) return;

  const { field, order } = this.sortingCriteria;
  this.list.sort((a, b) => {
    let comparison = 0;

    // 处理字符串类型字段（比如name），用localeCompare做自然排序
    if (typeof a[field] === 'string' && typeof b[field] === 'string') {
      comparison = a[field].localeCompare(b[field]);
    } 
    // 处理数字/时间戳类型字段（比如lastUpdated）
    else if (typeof a[field] === 'number' && typeof b[field] === 'number') {
      comparison = a[field] - b[field];
    }
    // 如果有日期对象类型的字段，可以加这个分支
    // else if (a[field] instanceof Date && b[field] instanceof Date) {
    //   comparison = a[field].getTime() - b[field].getTime();
    // }

    // 根据排序方向反转结果，实现降序
    return order === 'DESC' ? -comparison : comparison;
  });
}

4. 新增元素时复用排序规则 #

现在新增元素后，只需要调用sortList()就能自动按照当前的排序规则插入到正确位置了：

addNewItem(newItem) {
  this.list.push(newItem);
  // 复用当前排序规则对列表重新排序
  this.sortList();
}

这样改造后，不管你之前是按name升序、lastUpdated降序还是其他规则排序，新增元素都会自动插入到对应的位置，完全复用已有的排序状态。

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