Angular Material mat-table获取Node后端数据成功但表格为空如何解决

云原生阿岚

2026-10-4

问题原因

核心原因是前后端返回格式不匹配：你的Node接口返回的是外层包裹了业务状态的对象{status: true, data: 玩家数据数组}，但前端代码默认把接口响应直接当做数组处理，赋值给dataSource.data的实际是外层对象，不是可渲染的数组，因此表格没有数据。
次要需要确认的点：字段名是否匹配，模板中你读取的是element.population，需要确认后端返回的数组项中包含population字段，且你的Player接口定义了该字段。

解决方案

两种方案二选一即可：

方案1：调整后端接口返回格式（更简洁）

修改Node端的接口逻辑，直接返回数据数组，去掉外层包裹：

// Get all Players
exports.findAll = (req, res) => {
    Player.findAll().then((players) => {
    // 直接返回数组
    res.status(200).json(players);
  });
};

方案2：调整前端响应解析逻辑（无需修改后端）

第一步：修改player.service.ts中的接口返回类型定义，匹配后端实际返回结构：

getPlayers(): Observable<{status: boolean, data: Player[]}> {
  return this.http.get<{status: boolean, data: Player[]}>(this.rootURL+ '/players');
}

第二步：修改component.ts中赋值逻辑，提取响应中的data字段作为表格数据源：

getPlayers() {
  this.playerService.getPlayers().subscribe(res => {
    console.log(res.data);
    this.dataSource.data = res.data;
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  });
}