Angular Material集成GAPI：表格显示行但单元格为空

这种情况我在集成Angular Material和第三方API时碰到过好多次，大概率是数据结构不匹配或者数据源初始化的问题，咱们一步步排查：

1. 先确认Google API返回的数据结构是否和模板字段匹配 #

这是最常见的原因！Google的API（比如People API）返回的用户数据通常是嵌套结构，而不是直接的name字段。比如返回的用户对象可能是这样的：

// 示例Google API返回的单个用户数据
{
  names: [
    { displayName: "Gianluca Silvestri", givenName: "Gianluca" }
  ],
  emailAddresses: [
    { value: "gianluca@example.com" }
  ]
}

如果你的模板里写的是{{user.name}}，那肯定拿不到值，得改成{{user.names[0].displayName}}。

快速验证方法：在组件里拿到API数据后，用console.log(this.dataSource.data)打印出来，看看实际的字段名和嵌套结构。

2. 检查数据源是否正确用MatTableDataSource初始化 #

你得确保把API返回的数组包装成MatTableDataSource实例，而不是直接赋值原始数组：

// 正确的写法
import { MatTableDataSource } from '@angular/material/table';

// ...

this.googleApiService.fetchUsers().subscribe(users => {
  this.dataSource = new MatTableDataSource(users); // 用MatTableDataSource包装
});

如果是后续更新数据，别忘了调用this.dataSource._updateChangeSubscription()来通知表格刷新：

this.dataSource.data = newUsers;
this.dataSource._updateChangeSubscription();

3. 确认displayedColumns数组包含你的列名 #

组件里必须定义displayedColumns数组，并且包含你在matColumnDef里定义的列名（比如"name"）：

// 组件里的代码
displayedColumns: string[] = ['name']; // 必须和matColumnDef的值一致

如果这个数组里漏了"name"，表格会渲染空行，因为它不知道要渲染哪个列的单元格。

4. 排查异步数据的时机问题 #

如果你的API请求是异步的，确保不要在数据返回前就渲染表格（或者至少初始化空的数据源）。比如不要直接在组件初始化时把dataSource设为undefined，应该先初始化空的数据源：

// 组件里的初始化代码
dataSource = new MatTableDataSource([]);

ngOnInit() {
  this.googleApiService.fetchUsers().subscribe(users => {
    this.dataSource.data = users; // 数据返回后更新数据源
  });
}

5. 检查字段名的大小写拼写 #

JavaScript是大小写敏感的！如果API返回的字段是Name而不是name，模板里的{{user.name}}就会为空。仔细核对console里打印的字段名和模板里的写法是否完全一致。

按照这几个步骤排查，应该能解决单元格为空的问题！

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