Angular Mat-table调用API后不显示数据问题求助

算力阿峰

2026-7-21

Angular Mat-Table 数据不显示排查方案（API返回空/模拟数据正常场景）

一、先盯紧后端接口的实际输出

既然日志显示API返回空数组，先排除后端问题：

直接用Postman或浏览器地址栏访问NestJS接口的完整URL，看原始返回是不是真的空数组
查NestJS接口逻辑：数据库查询条件有没有写错、有没有加不必要的权限过滤、数据库里是不是真的存了对应数据
看NestJS控制台日志，把执行的SQL语句打出来（用TypeORM的话开日志），确认查询结果是否为空

二、前端服务层（DrinksService）排查

检查DrinksService里的API调用代码：请求方法（GET/POST）、URL、请求头是不是和后端要求的一致，比如要不要带token、Content-Type是不是正确
在service的API调用里加日志，打印完整响应：
```
getDrinks() {
  return this.http.get<Drink[]>('/api/drinks').pipe(
    tap(res => console.log('API原始响应:', res))
  );
}
```
重点确认响应结构和前端Drink接口是否匹配，比如后端返回的是drinkName还是name，大小写有没有差（HttpClient不会自动转字段名大小写）

三、prijslijst组件层排查

确认组件订阅API数据的逻辑：是不是在订阅后把数据正确赋值给了表格数据源，别漏了赋值：

// 错误示例：只订阅没赋值
this.drinksService.getDrinks().subscribe();
// 正确操作：
this.drinksService.getDrinks().subscribe(data => {
  this.dataSource.data = data;
  console.log('组件拿到的数据:', data);
});

检查Mat-Table的列定义：HTML里的matColumnDef="xxx"是不是和数据源里的字段名完全一致
确认dataSource是用MatTableDataSource初始化的：
```
dataSource = new MatTableDataSource<Drink>();
```