如何修复Angular Material表格无法实时动态更新的问题？

问题场景 #

你当前使用MatTableDataSource绑定AssemblyErrorService中的asmErrorLog数组存储错误信息，但当服务通过push添加新错误时，表格无法实时更新。

组件代码：

export class TableComponent<T> implements OnInit {
    displayedColumns: Array<string> = [];
    dataSource: MatTableDataSource<T> = new MatTableDataSource();

    constructor(public asmErrorServ: AssemblyErrorService) { }

    ngOnInit(): void {
        this.displayedColumns = ['Message Type', 'Message', 'Message Date'];
        this.dataSource = (<any>this.asmErrorServ).asmErrorLog;
    }
}

服务中添加错误的代码：

export class AssemblyErrorService{
    // ...其他代码

    error(message: string): void {
        let newError: asmMessage = { type: 'error', message: message, time: Date.now() };
        this.asmErrorLog.push(newError);

        this._snackBar.open(this.generateSnackbarString(newError), 'Dismiss', {
            duration: 3000,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition,
            panelClass: ['red-snackbar', 'login-snackbar'],
        });
    }
}

问题原因 #

MatTableDataSource依赖数组的引用变化触发变更检测，而push操作只是修改数组内容，不会改变数组引用，因此Angular无法感知数据更新，表格也就不会重新渲染。

解决办法 #

方法1：使用RxJS BehaviorSubject（推荐） #

通过响应式数据流管理错误日志，确保数据更新时组件能实时收到通知。

修改AssemblyErrorService：

import { BehaviorSubject } from 'rxjs';

export class AssemblyErrorService{
    private asmErrorLogSubject = new BehaviorSubject<asmMessage[]>([]);
    // 对外暴露可观察对象，供组件订阅
    public asmErrorLog$ = this.asmErrorLogSubject.asObservable();

    // ...其他代码

    error(message: string): void {
        let newError: asmMessage = { type: 'error', message: message, time: Date.now() };
        // 获取当前日志数组，创建新数组添加新错误
        const currentLogs = this.asmErrorLogSubject.value;
        const updatedLogs = [...currentLogs, newError];
        // 发送更新后的数组
        this.asmErrorLogSubject.next(updatedLogs);

        // snackbar代码保持不变
        this._snackBar.open(this.generateSnackbarString(newError), 'Dismiss', {
            duration: 3000,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition,
            panelClass: ['red-snackbar', 'login-snackbar'],
        });
    }
}

修改TableComponent：

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

export class TableComponent<T> implements OnInit, OnDestroy {
    displayedColumns: Array<string> = [];
    dataSource: MatTableDataSource<T> = new MatTableDataSource();
    private logSubscription?: Subscription;

    constructor(public asmErrorServ: AssemblyErrorService) { }

    ngOnInit(): void {
        this.displayedColumns = ['Message Type', 'Message', 'Message Date'];
        // 订阅错误日志的更新
        this.logSubscription = this.asmErrorServ.asmErrorLog$.subscribe(logs => {
            this.dataSource.data = logs;
        });
    }

    // 组件销毁时取消订阅，避免内存泄漏
    ngOnDestroy(): void {
        this.logSubscription?.unsubscribe();
    }
}

方法2：修改数组引用触发更新 #

每次添加新错误后，通过重新赋值数组改变引用，触发Angular变更检测。

修改AssemblyErrorService的error方法：

error(message: string): void {
    let newError: asmMessage = { type: 'error', message: message, time: Date.now() };
    this.asmErrorLog.push(newError);
    // 重新赋值数组，创建新引用
    this.asmErrorLog = [...this.asmErrorLog];

    // snackbar代码保持不变
}

修改TableComponent：

export class TableComponent<T> implements OnInit {
    displayedColumns: Array<string> = [];
    dataSource: MatTableDataSource<T> = new MatTableDataSource();

    constructor(public asmErrorServ: AssemblyErrorService) { }

    ngOnInit(): void {
        this.displayedColumns = ['Message Type', 'Message', 'Message Date'];
        // 直接绑定服务中的数组，引用变化时自动更新
        this.dataSource.data = (<any>this.asmErrorServ).asmErrorLog;
    }
}

方法3：手动调用表格渲染方法 #

通过ViewChild获取表格实例，在数据更新后手动触发渲染。

组件模板添加表格引用：

<table mat-table #errorTable [dataSource]="dataSource" class="mat-elevation-z8">
    <!-- 列定义 -->
    <ng-container matColumnDef="Message Type">
        <th mat-header-cell *matHeaderCellDef> Message Type </th>
        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
    </ng-container>
    <!-- 其他列定义... -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

修改AssemblyErrorService添加事件通知：

import { EventEmitter } from '@angular/core';

export class AssemblyErrorService{
    // 定义事件发射器，通知组件数据更新
    public onErrorAdded = new EventEmitter<void>();

    // ...其他代码

    error(message: string): void {
        let newError: asmMessage = { type: 'error', message: message, time: Date.now() };
        this.asmErrorLog.push(newError);
        // 触发事件
        this.onErrorAdded.emit();

        // snackbar代码保持不变
    }
}

修改TableComponent：

import { ViewChild } from '@angular/core';
import { MatTable } from '@angular/material/table';

export class TableComponent<T> implements OnInit {
    displayedColumns: Array<string> = [];
    dataSource: MatTableDataSource<T> = new MatTableDataSource();
    // 获取表格实例
    @ViewChild('errorTable') errorTable!: MatTable<T>;

    constructor(public asmErrorServ: AssemblyErrorService) { }

    ngOnInit(): void {
        this.displayedColumns = ['Message Type', 'Message', 'Message Date'];
        this.dataSource.data = (<any>this.asmErrorServ).asmErrorLog;
        
        // 订阅错误添加事件，手动渲染表格
        this.asmErrorServ.onErrorAdded.subscribe(() => {
            this.errorTable.renderRows();
        });
    }
}

方案对比 #

• BehaviorSubject方案：符合Angular响应式编程理念，能更好地管理数据流，避免内存泄漏（需手动取消订阅），推荐用于复杂场景。
• 数组引用修改方案：实现简单，但每次创建新数组会有轻微性能开销，适合小型项目或简单场景。
• 手动渲染方案：无需修改数据结构，但需要手动管理渲染时机，适合临时快速修复。

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