如何将Angular Signals与Material Table数据源结合使用？

问题描述 #

我正在尝试使用Angular的新特性Signals，在服务中定义了一个计算信号：

failedTasks = computed(() => this.tasksState().failedTasks);

我希望将这个信号和组件内的Material Table数据源关联起来。之前使用Observable时的代码是这样的：

dataSource = new MatTableDataSource<FailedTask>([]);

constructor(tasksService: TasksService){
    this.tasksService.failedTasks$.subscribe(tasks => this.dataSource.data = tasks)    
}

现在用Signals，我只想到用effect来实现：

constructor(tasksService: TasksService) {
    effect(() => {
      this.dataSource.data = this.tasksService.failedTasks();
    });
}

请问这种方案是否合理？官方文档提到“大多数应用代码中很少需要使用Effects”，那组件中需要订阅数据源时该怎么实现？

回答 #

1. 当前effect方案的合理性 #

你用effect实现的方式是可行的，但确实不是最优解。effect的设计初衷是处理“副作用”（比如DOM操作、调用外部API、更新非Signal状态），虽然更新MatTableDataSource.data属于副作用范畴，但Angular提供了更贴合Signal特性的替代方案，能避免不必要的effect使用。

2. 更优实现方式：Signal转Observable #

Material Table原生支持Observable数据源，你可以用Angular提供的toObservable()工具函数，将Signal转换为Observable后直接绑定，无需手动订阅或依赖effect：

import { toObservable } from '@angular/core/rxjs-interop';
import { MatTableDataSource } from '@angular/material/table';

dataSource = new MatTableDataSource<FailedTask>([]);

constructor(tasksService: TasksService) {
  // 方式1：手动订阅转换后的Observable更新数据源
  toObservable(this.tasksService.failedTasks).subscribe(tasks => {
    this.dataSource.data = tasks;
  });

  // 方式2：覆盖dataSource的connect方法，由表格自动管理订阅
  this.dataSource.connect = () => toObservable(this.tasksService.failedTasks);
}

第二种方式更推荐，因为Material Table会自动处理订阅和取消订阅逻辑，无需你手动管理生命周期。

3. Angular 17+ 极简方案：模板直接绑定Signal #

如果你的项目使用Angular 17及以上版本，Material Table支持直接在模板中绑定Signal数组，完全不需要组件类写额外代码：

<table mat-table [dataSource]="tasksService.failedTasks()">
  <!-- 表格列定义 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>任务名称</th>
    <td mat-cell *matCellDef="let task">{{task.name}}</td>
  </ng-container>
  <!-- 其他列... -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Angular会自动跟踪Signal的变化，实时更新表格数据，这是最符合Signal设计理念的写法。

总结 #

• 用effect的方案可行，但不符合官方“尽量少用effect”的原则，存在更贴合场景的替代方案。
• 优先推荐Angular 17+的模板直接绑定方案；若版本较低，选择toObservable()转换后绑定数据源的方式。

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