Angular Material 15无表头表格：点击列实现排序

需求：基于Angular Material 15实现无表头表格，通过点击表格列单元格触发对应列的排序操作（升序/降序切换）。

初始代码问题分析 #

原代码存在以下问题：

• 排序状态未持久化：每次点击列时，排序状态变量会被重新声明，导致无法正确切换升序/降序
• 变量逻辑冗余：booleanValue和boolean变量重复，逻辑混乱
• 若使用MatTableDataSource，直接调用sort方法并非标准用法，应结合组件状态维护排序逻辑

修正后的实现代码 #

HTML模板 #

移除表头相关代码，为需要排序的列单元格添加点击事件，可按需添加排序方向标识：

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <mat-cell *matCellDef="let element" (click)="sortData('position')">
      {{element.position}}
      <!-- 可选：显示当前排序方向 -->
      <span *ngIf="currentSortCol === 'position'">
        {{isAscSort ? '↑' : '↓'}}
      </span>
    </mat-cell>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <mat-cell *matCellDef="let element" (click)="sortData('name')">
      {{element.name}}
      <!-- 可选：显示当前排序方向 -->
      <span *ngIf="currentSortCol === 'name'">
        {{isAscSort ? '↑' : '↓'}}
      </span>
    </mat-cell>
  </ng-container>

  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

TypeScript逻辑 #

在组件中维护排序状态，实现正确的排序切换与数据更新：

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

export interface PeriodicElement {
  name: string;
  position: number;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen'},
  {position: 2, name: 'Helium'},
  {position: 3, name: 'Lithium'},
  {position: 4, name: 'Beryllium'},
];

@Component({
  selector: 'table-flex-basic-example',
  templateUrl: 'table-flex-basic-example.html',
  styleUrls: ['table-flex-basic-example.css'],
})
export class TableFlexBasicExample {
  displayedColumns: string[] = ['position', 'name'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  
  // 维护当前排序列和方向
  currentSortCol: string = 'position';
  isAscSort: boolean = true;

  sortData(colName: string) {
    // 切换排序逻辑：点击当前列则反转方向，点击新列则重置为升序
    if (this.currentSortCol === colName) {
      this.isAscSort = !this.isAscSort;
    } else {
      this.currentSortCol = colName;
      this.isAscSort = true;
    }

    // 执行排序，区分字符串与数字类型
    this.dataSource.data.sort((a, b) => {
      const valA = a[colName];
      const valB = b[colName];
      
      if (typeof valA === 'string') {
        return this.isAscSort 
          ? valA.localeCompare(valB) 
          : valB.localeCompare(valA);
      } else {
        return this.isAscSort 
          ? valA - valB 
          : valB - valA;
      }
    });

    // 重新赋值数据源，触发表格渲染更新
    this.dataSource.data = [...this.dataSource.data];
  }
}

关键说明 #

1. 状态持久化：通过组件属性currentSortCol和isAscSort维护排序状态，避免每次点击重置
2. 类型适配排序：针对字符串和数字类型分别处理排序逻辑，保证结果符合预期
3. 数据源更新：使用MatTableDataSource时，需重新赋值data数组触发表格视图更新
4. 用户体验优化：添加排序方向箭头，让用户直观感知当前排序状态

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