Angular Material Table无法展示API返回数据的问题解决

你的代码存在几个关键错误，导致表格无法显示数据，逐一修正即可：

1. 修正Service中的类型错误 #

API返回的是单个Users对象（包含list数组、count和success字段），但你将返回类型声明成了Observable<Users[]>（数组类型），这会导致数据解析不匹配。

修正后的Service代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, tap } from 'rxjs';
import { Users } from './users'; // 确保路径正确

@Injectable({ providedIn: 'root' })
export class UsersService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<Users> {
    // myHeader = myHeader.set('id', '123456');
    return this.http.get<Users>(`https://api.users.com/user/list`).pipe(
      tap(response => console.log(response))
    );
  }
}

2. 修正组件中的数据源处理 #

组件存在两个核心问题：

• users变量类型错误，应该声明为MatTableDataSource<List>
• 订阅时需要提取响应里的response.list作为表格数据源，而非整个响应对象

修正后的组件代码：

import { OnInit, Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { UsersService } from './users.service';
import { List } from './list';

export class UsersComponent implements OnInit{
  displayedColumns: string[] = ['id', 'first_name', 'login', 'phone'];
  users = new MatTableDataSource<List>([]); // 初始化空数据源

  constructor(private usersService: UsersService){ }

  ngOnInit(): void {
    this.onGetUsers();
  }

  onGetUsers(): void{
    this.usersService.getUsers().subscribe(
      (response) => {
        this.users.data = response.list; // 将API返回的list数组赋值给数据源的data属性
      }
    );
  }
}

3. 模板代码确认 #

你的模板代码逻辑正确，只要数据源修正完成，表格就能正常渲染数据。

额外检查建议 #

• 打开浏览器控制台，查看tap打印的响应数据是否符合预期，确认API确实返回了包含用户列表的list字段
• 确保模块中已正确导入MatTableModule等Angular Material表格相关依赖

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