Angular MatTable主表嵌套子表展示嵌套对象数据报错解决

1. 检查数据结构的合法性 #

首先确认basematricolaData接口中dataMatricola的类型必须是数组（subMatricolaData[]），如果API返回的该字段是单个对象或者非数组类型，会直接触发报错。

修正接口定义示例： #

interface basematricolaData {
  // 主表其他字段
  id: number;
  name: string;
  // 必须定义为数组类型
  dataMatricola: subMatricolaData[];
}

interface subMatricolaData {
  // 子表字段
  subId: number;
  subInfo: string;
}

处理API返回的非数组数据： #

如果接口返回的dataMatricola是单个对象，在数据初始化时转成数组：

// 假设apiResponse是接口返回的主表数据数组
this.mainDataSource.data = apiResponse.map(item => ({
  ...item,
  // 确保转成数组，避免非数组绑定
  dataMatricola: Array.isArray(item.dataMatricola) ? item.dataMatricola : [item.dataMatricola]
}));

2. 子表模板的正确绑定方式 #

根据数据类型选择对应的绑定写法：

方式一：直接绑定数组（简单场景） #

确认element.dataMatricola是数组后，直接绑定：

<!-- 主表行展开模板 -->
<ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
    <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
      <!-- 子表 -->
      <mat-table [dataSource]="element.dataMatricola">
        <!-- 子表列定义 -->
        <ng-container matColumnDef="subId">
          <th mat-header-cell *matHeaderCellDef>子ID</th>
          <td mat-cell *matCellDef="let subElement">{{subElement.subId}}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="subDisplayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: subDisplayedColumns;"></tr>
      </mat-table>
    </div>
  </td>
</ng-container>

方式二：包装为MatTableDataSource（需排序/过滤场景） #

如果子表需要排序、过滤等功能，建议为每个主表项单独创建子数据源：

// 主表数据加载后初始化子数据源
this.mainDataSource.data.forEach(item => {
  item.subDataSource = new MatTableDataSource(item.dataMatricola);
});

模板中绑定该子数据源：

<mat-table [dataSource]="element.subDataSource">
  <!-- 子表列定义 -->
</mat-table>

3. 处理空值或未初始化情况 #

添加空值判断，避免空数据或未初始化时触发报错：

<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
  <div *ngIf="!element.dataMatricola?.length" class="empty-state">无关联子数据</div>
  <mat-table *ngIf="element.dataMatricola?.length" [dataSource]="element.dataMatricola">
    <!-- 子表列定义 -->
  </mat-table>
</div>

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