Angular表格排序：如何按数据类型复用排序逻辑？

核心修正点 #

你之前遇到的a.prop报错问题，本质是动态属性访问的语法错误：当prop是变量时，必须用a[prop]来获取对象属性值，点语法a.prop只能访问固定命名的属性，无法识别变量。

分类型复用排序逻辑 #

我们可以封装通用排序逻辑，根据列的数据类型（数字、字符串、日期）选择对应比较规则，同时用1/-1控制升序/降序切换：

1. 数字类型排序

直接通过数值差值返回排序结果，逻辑最简洁：

sortNumbers(prop: string, direction: number) {
  this.dataList.sort((a, b) => {
    return direction * (a[prop] - b[prop]);
  });
}

2. 字符串类型排序

• 推荐用localeCompare：支持多语言、特殊字符的正确排序，还能忽略大小写：

sortStrings(prop: string, direction: number) {
  this.dataList.sort((a, b) => {
    const valA = a[prop].toLowerCase();
    const valB = b[prop].toLowerCase();
    return direction * valA.localeCompare(valB);
  });
}

• 用1/-1替代localeCompare的场景：如果只处理ASCII字符、无需多语言支持，也可以直接比较返回结果：

sortSimpleStrings(prop: string, direction: number) {
  this.dataList.sort((a, b) => {
    const valA = a[prop].toLowerCase();
    const valB = b[prop].toLowerCase();
    if (valA < valB) return direction * -1;
    if (valA > valB) return direction * 1;
    return 0;
  });
}

3. 日期类型排序

将日期转成时间戳（getTime()）后，按数字排序逻辑处理：

sortDates(prop: string, direction: number) {
  this.dataList.sort((a, b) => {
    const timeA = new Date(a[prop]).getTime();
    const timeB = new Date(b[prop]).getTime();
    return direction * (timeA - timeB);
  });
}

整合为通用排序方法 #

可以把上述逻辑合并到一个函数里，通过传入类型参数自动匹配排序规则，同时支持点击同一列切换排序方向：

currentSortProp: string = '';
currentSortDir: number = 1; // 1=升序，-1=降序

sortColumn(prop: string, type: 'number' | 'string' | 'date') {
  // 切换排序方向：点击同一列则反转，否则重置为升序
  if (this.currentSortProp === prop) {
    this.currentSortDir *= -1;
  } else {
    this.currentSortProp = prop;
    this.currentSortDir = 1;
  }

  switch (type) {
    case 'number':
      this.dataList.sort((a, b) => this.currentSortDir * (a[prop] - b[prop]));
      break;
    case 'string':
      this.dataList.sort((a, b) => {
        const valA = a[prop].toLowerCase();
        const valB = b[prop].toLowerCase();
        return this.currentSortDir * valA.localeCompare(valB);
      });
      break;
    case 'date':
      this.dataList.sort((a, b) => {
        const timeA = new Date(a[prop]).getTime();
        const timeB = new Date(b[prop]).getTime();
        return this.currentSortDir * (timeA - timeB);
      });
      break;
  }
  // 生成新数组触发Angular变更检测
  this.dataList = [...this.dataList];
}

Angular 模板使用示例 #

在表头绑定点击事件，传入对应属性名和数据类型：

<table>
  <thead>
    <tr>
      <th (click)="sortColumn('id', 'number')">ID</th>
      <th (click)="sortColumn('username', 'string')">用户名</th>
      <th (click)="sortColumn('createTime', 'date')">创建时间</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataList">
      <td>{{ item.id }}</td>
      <td>{{ item.username }}</td>
      <td>{{ item.createTime | date:'yyyy-MM-dd' }}</td>
    </tr>
  </tbody>
</table>

额外注意事项 #

• 日期排序时要确保数据是合法的日期格式，否则new Date()会返回无效值；
• 如果数组是不可变数据，排序后需重新赋值（比如用[...this.dataList]）来触发Angular的变更检测。

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