Angular 17：如何为Signal数据源的Material Table实现排序？

问题说明 #

我在Angular Material表格中使用Signal作为数据源：

dataSource: WritableSignal<PeriodicElement[]> = signal([]);

表格数据可正常展示，但按照官方文档添加matSort指令后排序功能失效（非Signal场景下功能正常），模板代码如下：

<table mat-table matSort [dataSource]="dataSource()" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell mat-sort-header *matHeaderCellDef>No.</th>
    ...
</table>

核心原因 #

直接绑定dataSource()会返回原始数组，Angular Material的表格排序指令无法跟踪数组变化或应用内置排序逻辑——表格需要的是可被观察的数据源实例，而非一次性的数组值。

可行解决方案 #

方案1：用MatTableDataSource包装Signal #

这是最贴近传统使用方式的方案，能直接复用Material表格的内置排序逻辑：

1. 组件内代码

   import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
   import { MatSort } from '@angular/material/sort';
   import { MatTableDataSource } from '@angular/material/table';
   import { WritableSignal, signal, effect } from '@angular/core';
   import { PeriodicElement } from './your-element-type';
   
   @Component({
     // 组件元数据（如selector、templateUrl等）
   })
   export class YourTableComponent implements OnInit, AfterViewInit {
     @ViewChild(MatSort) sort!: MatSort;
     dataSourceSignal: WritableSignal<PeriodicElement[]> = signal([]);
     dataSource = new MatTableDataSource<PeriodicElement>([]);
   
     ngOnInit() {
       // 监听Signal变化，同步更新表格数据源
       effect(() => {
         this.dataSource.data = this.dataSourceSignal();
       });
     }
   
     ngAfterViewInit() {
       // 将排序实例绑定到表格数据源
       this.dataSource.sort = this.sort;
     }
   }
   

2. 模板调整
   将[dataSource]="dataSource()"改为[dataSource]="dataSource"：

   <table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8">
     <!-- 列定义保持不变 -->
   </table>
   

方案2：手动通过计算属性实现排序 #

如果不想依赖MatTableDataSource，可以用Angular的计算属性结合Signal实现自定义排序：

1. 组件内代码

   import { Component, ViewChild, AfterViewInit } from '@angular/core';
   import { MatSort } from '@angular/material/sort';
   import { WritableSignal, signal, computed, effect } from '@angular/core';
   import { PeriodicElement } from './your-element-type';
   
   @Component({
     // 组件元数据（如selector、templateUrl等）
   })
   export class YourTableComponent implements AfterViewInit {
     @ViewChild(MatSort) sort!: MatSort;
     dataSource: WritableSignal<PeriodicElement[]> = signal([]);
   
     // 计算属性：根据当前排序状态返回排序后的数组
     sortedData = computed(() => {
       const rawData = this.dataSource();
       if (!this.sort || rawData.length === 0) return rawData;
   
       return [...rawData].sort((a, b) => {
         const isAscending = this.sort.direction === 'asc';
         switch (this.sort.active) {
           case 'position': return compare(a.position, b.position, isAscending);
           case 'name': return compare(a.name, b.name, isAscending);
           // 为需要排序的列添加对应逻辑
           default: return 0;
         }
       });
     });
   
     ngAfterViewInit() {
       // 监听排序状态变化，触发计算属性更新
       effect(() => {
         this.sort.active;
         this.sort.direction;
       });
     }
   }
   
   // 排序辅助函数
   function compare(a: number | string, b: number | string, isAsc: boolean) {
     return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
   }
   

2. 模板调整
   绑定计算属性的调用结果：

   <table mat-table matSort [dataSource]="sortedData()" class="mat-elevation-z8">
     <!-- 列定义保持不变 -->
   </table>
   

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