Angular从db.json取数成功但Mat-Table无法显示数据问题

API 探路者

2026-8-24

问题原因

你将dataSource初始化为this.UserDb的空数组，但HTTP请求完成后，this.UserDb = users是让UserDb指向了一个新的数组对象，而dataSource仍然引用最初的空数组。Angular无法检测到dataSource的引用变化，因此表格不会更新展示新数据。

修复方案

有两种可行的修复方式，推荐使用第二种（符合Angular Material表格的最佳实践）：

方式一：直接更新dataSource引用

在HTTP请求的回调中，更新dataSource的引用，让它指向新的数组：

修改TS文件中的ngOnInit方法：

ngOnInit(): void {
  console.log("im working");
  this._http.get("http://localhost:3002/posts").subscribe((users:any)=>{
    this.UserDb = users;
    this.dataSource = this.UserDb; // 新增此行，更新dataSource引用
    console.log(this.UserDb);
  })
}

方式二：使用`MatTableDataSource`（推荐）

Angular Material提供的MatTableDataSource内置了数据变更通知机制，更适合动态数据场景：

先导入MatTableDataSource：

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

修改dataSource的定义：

dataSource = new MatTableDataSource<user>(this.UserDb);

在HTTP请求回调中更新数据源的data属性：

ngOnInit(): void {
  console.log("im working");
  this._http.get("http://localhost:3002/posts").subscribe((users:any)=>{
    this.UserDb = users;
    this.dataSource.data = this.UserDb; // 更新数据源数据
    console.log(this.UserDb);
  })
}

额外细节检查