Angular中MatTable无法渲染SpringBoot返回的嵌套JSON数据求助

嘿，我看了你的代码，问题主要出在两个地方：MatTableDataSource没有感知到数据更新，还有直接访问嵌套属性可能触发报错，这俩问题共同导致了表格没渲染出来。咱们一步步来搞定：

1. 核心问题：数据更新后没通知表格 #

你初始化dataSource时用的是receivedBatchesData的初始值（也就是undefined），当HTTP请求拿到数据后，你只更新了receivedBatchesData，但dataSource根本不知道数据已经变了，自然不会触发表格渲染。

修改你的makeRequest方法，在拿到数据后同步更新dataSource的数据源：

makeRequest(): void {
  this.http.get<IBatchInstance[]>(myDataURL).subscribe(data => {
    this.receivedBatchesData = data;
    // 关键：通知dataSource数据已更新
    this.dataSource.data = this.receivedBatchesData;
  }, err => {
    console.log('An error occured during the http GET request');
  });
}

或者更直接的方式，用返回的数据重新创建dataSource：

this.http.get<IBatchInstance[]>(myDataURL).subscribe(data => {
  this.receivedBatchesData = data;
  this.dataSource = new MatTableDataSource(this.receivedBatchesData);
}, err => {
  console.log('An error occured during the http GET request');
});

2. 潜在坑：嵌套属性为空导致渲染失败 #

如果SpringBoot返回的某个IBatchInstance对象里的batchDef是null或undefined，模板里直接写{{batchInstance.batchDef.name}}会抛出空指针错误，直接导致整个表格渲染中断。

解决方法是用Angular的安全导航操作符（?.），它会在属性为空时停止访问，避免报错：
修改HTML模板里的嵌套属性部分：

<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.batchDef?.name}} </mat-cell>
</ng-container>
<!-- Label Column -->
<ng-container matColumnDef="label">
  <mat-header-cell *matHeaderCellDef> Label </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.batchDef?.label}} </mat-cell>
</ng-container>
<!-- Perimeter Column -->
<ng-container matColumnDef="perimeter">
  <mat-header-cell *matHeaderCellDef> Perimeter </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.batchDef?.perimeter}} </mat-cell>
</ng-container>

最后验证 #

做完这两处修改后重启应用：

• HTTP请求拿到数据后，dataSource会同步更新，表格会自动渲染数据
• 即使存在batchDef为空的条目，也不会触发报错，对应单元格显示为空，其他正常数据依然能正常展示

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