解决Angular Material表格从Node API取数后的大小写不敏感排序问题

Angular Material的MatTableDataSource默认排序是大小写敏感的，你可以通过自定义**排序数据访问器（Sorting Data Accessor）**来实现忽略大小写的排序效果。

实现步骤 #

1. 自定义排序访问器 #

在你的表格组件中，初始化MatTableDataSource后，重写它的sortingDataAccessor方法，针对目标列做大小写转换处理：

import { MatTableDataSource } from '@angular/material/table';

// 替换成你实际的数据类型
interface YourDataType {
  'column-1': string;
  // 其他字段...
}

// yourApiData是从Node API获取到的数据
dataSource = new MatTableDataSource<YourDataType>(yourApiData);

// 配置自定义排序逻辑
this.dataSource.sortingDataAccessor = (item, property) => {
  // 仅对column-1列启用大小写不敏感排序
  if (property === 'column-1') {
    // 将字段值转为小写后参与排序比较
    return item[property].toLowerCase();
  }
  // 其他列保持默认排序行为
  return item[property];
};

2. 关联MatSort实例 #

确保组件已绑定MatSort，并将其赋值给dataSource的sort属性：

import { MatSort } from '@angular/material/sort';
import { ViewChild, AfterViewInit } from '@angular/core';

// 组件类需实现AfterViewInit接口
export class YourTableComponent implements AfterViewInit {
  @ViewChild(MatSort) sort!: MatSort;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }
}

3. 多列扩展（可选） #

如果需要对多个列启用大小写不敏感排序，只需扩展判断逻辑：

this.dataSource.sortingDataAccessor = (item, property) => {
  const caseInsensitiveColumns = ['column-1', 'column-2', 'column-3'];
  if (caseInsensitiveColumns.includes(property)) {
    return item[property].toLowerCase();
  }
  return item[property];
};

完成以上配置后，点击column-1表头排序时，系统会自动忽略大小写，按照字母顺序排列条目。

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