Angular mat-table数据源更新后UI不刷新（SignalR Azure实时场景）

当客户端禁用WebSocket后，SignalR会降级使用Server-Sent Events（SSE）推送数据。SSE的回调执行上下文不在Angular的变更检测域内，而Angular默认仅在浏览器UI事件（如鼠标移动、点击）触发时才会自动执行变更检测。这就导致数据源更新后，mat-table不会自动刷新，必须等到鼠标交互触发变更检测才会更新UI。

方法1：用NgZone包裹数据更新逻辑 #

通过NgZone将SignalR的回调逻辑包裹在Angular的变更检测上下文内，确保数据更新后立即触发UI刷新。

实现步骤： #

1. 在组件中注入NgZone服务
2. 将SignalR接收数据的回调、重载按钮的逻辑包裹在ngZone.run()中

示例代码：

import { Component, NgZone, OnInit } from '@angular/core';
import { HubConnection } from '@microsoft/signalr';

@Component({
  selector: 'app-real-time-table',
  templateUrl: './real-time-table.component.html'
})
export class RealTimeTableComponent implements OnInit {
  dataSource: any[] = [];
  private hubConnection!: HubConnection;

  constructor(private ngZone: NgZone) {}

  ngOnInit(): void {
    // 初始化SignalR连接（省略连接配置）
    this.hubConnection.on('PushUpdatedData', (newData) => {
      this.ngZone.run(() => {
        // 用新数组替换原数组，确保引用变化触发变更检测
        this.dataSource = [...newData];
      });
    });
  }

  reloadData(): void {
    this.hubConnection.invoke('FetchLatestData').then((latestData) => {
      this.ngZone.run(() => {
        this.dataSource = [...latestData];
      });
    });
  }
}

方法2：手动触发变更检测 #

如果不想依赖NgZone，可以注入ChangeDetectorRef，在数据更新后手动调用detectChanges()触发变更检测。

示例代码：

import { Component, ChangeDetectorRef, OnInit } from '@angular/core';
import { HubConnection } from '@microsoft/signalr';

@Component({
  selector: 'app-real-time-table',
  templateUrl: './real-time-table.component.html'
})
export class RealTimeTableComponent implements OnInit {
  dataSource: any[] = [];
  private hubConnection!: HubConnection;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.hubConnection.on('PushUpdatedData', (newData) => {
      this.dataSource = [...newData];
      // 手动触发变更检测
      this.cdr.detectChanges();
    });
  }

  reloadData(): void {
    this.hubConnection.invoke('FetchLatestData').then((latestData) => {
      this.dataSource = [...latestData];
      this.cdr.detectChanges();
    });
  }
}

注意事项 #

• 更新数据源时，必须创建新数组（如用扩展运算符[...newData]），不能直接修改原数组的元素。因为Angular的变更检测会对比数组引用，引用不变的话不会触发UI更新。

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