mat-table绑定[dataSource]无数据渲染，但json管道可正常显示

你遇到的问题是因为Mat-Table直接绑定普通数组时，异步更新数据后表格无法自动感知到数据变化——虽然数组内容已经更新，但表格没有触发重新渲染。而json管道能正常显示是因为它属于纯管道，会在每次变更检测时重新计算并展示最新值。

下面是两种可行的解决方法：

方法一：使用MatTableDataSource（官方推荐） #

MatTableDataSource是Angular Material提供的专门用于管理表格数据源的类，它内置了数据更新通知机制，能自动触发表格刷新。

1. 先导入MatTableDataSource：

import { HttpClient } from '@angular/common/http';
import { MatTableDataSource } from '@angular/material/table';

constructor(private http: HttpClient) {}

displayedColumns: string[] = ['firstname', 'lastname'];
// 初始化空的数据源
users = new MatTableDataSource<any>([]);

ngOnInit(): void {
  this.http.get('/api/users').subscribe(
    (data) => {
      // 更新数据源的data属性
      this.users.data = data as any[];
    },
    (error) => {
      console.log(error);
    }
  );
}

HTML代码无需修改，保持原有的绑定即可：

<table #table mat-table [dataSource]="users" class="mat-elevation-z8">
    <ng-container matColumnDef="firstname">
        <th mat-header-cell *matHeaderCellDef>First Name</th>
        <td mat-cell *matCellDef="let element"> {{element.firstname}} </td>
    </ng-container>
    <ng-container matColumnDef="lastname">
        <th mat-header-cell *matHeaderCellDef>Last Name</th>
        <td mat-cell *matCellDef="let element"> {{element.lastname}} </td>
    </ng-container>

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

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

如果不想使用MatTableDataSource，可以通过ChangeDetectorRef手动通知Angular检测变更，从而触发表格渲染。

1. 导入并注入ChangeDetectorRef：

import { HttpClient } from '@angular/common/http';
import { ChangeDetectorRef } from '@angular/core';

constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {}

displayedColumns: string[] = ['firstname', 'lastname'];
users: any[] = [];

ngOnInit(): void {
  this.http.get('/api/users').subscribe(
    (data) => {
      this.users = data as any[];
      // 手动触发变更检测
      this.cdr.detectChanges();
    },
    (error) => {
      console.log(error);
    }
  );
}

HTML代码保持不变即可。

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