Angular Mat-Table展开行中子组件传参为undefined的解决方法

下面是几个常见的排查和解决方向，按顺序尝试即可：

1. 确认展开模板能拿到正确的行数据 #

Angular Material的可展开行需要保证展开模板里的row变量确实对应当前行的数据。先检查你的表格模板结构是否符合规范：

<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
  <!-- 你的4个数据列定义示例 -->
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef> 列1 </th>
    <td mat-cell *matCellDef="let row"> {{row.column1}} </td>
  </ng-container>
  <!-- 其他数据列省略... -->

  <!-- 展开操作列 -->
  <ng-container matColumnDef="expand">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
      <button mat-icon-button (click)="expandedElement = expandedElement === row ? null : row">
        <mat-icon>{{expandedElement === row ? 'expand_less' : 'expand_more'}}</mat-icon>
      </button>
    </td>
  </ng-container>

  <!-- 展开行详情模板 -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let row" [attr.colspan]="displayedColumns.length">
      <!-- 用*ngIf确保只有展开的行才渲染子组件，避免提前初始化 -->
      <div class="expanded-row" *ngIf="expandedElement === row">
        <app-chart [datas]="generateChartData(row)"></app-chart>
      </div>
    </td>
  </ng-container>

  <!-- 主行渲染 -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <!-- 展开行渲染 -->
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
</table>

重点注意：

• 展开行的*matRowDef和主行共享同一个row变量，确保能拿到当前行的完整数据
• 通过*ngIf="expandedElement === row"控制子组件渲染时机，避免未展开的行提前初始化导致数据为空

2. 检查生成数据的函数逻辑 #

先排查generateChartData(row)函数本身是否能返回有效对象，而不是undefined。可以添加日志调试，同时处理空数据情况：

generateChartData(row: YourRowType) {
  console.log('当前行数据:', row);
  // 先判断行数据或必要属性是否存在
  if (!row || !row.requiredProp) {
    console.warn('行数据不完整，无法生成图表数据');
    // 返回默认空对象，避免子组件接收undefined
    return { labels: [], datasets: [] };
  }
  // 正常生成图表数据
  return {
    labels: row.chartLabels,
    datasets: [{ data: row.chartValues }]
  };
}

如果行数据是异步加载的，要确保数据完全加载完成后再渲染表格，否则函数会拿到未初始化的空数据。

3. 校验子组件的输入参数定义 #

别忽略拼写错误！子组件里的@Input()名称必须和模板里的[datas]完全一致：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html'
})
export class ChartComponent {
  // 可以用非空断言，或者给默认值避免undefined
  @Input() datas!: ChartData;
  // 更稳妥的写法：给默认值
  // @Input() datas: ChartData = { labels: [], datasets: [] };
}

4. 提前预计算图表数据（可选优化） #

如果generateChartData每次调用都返回新对象，可能触发Angular不必要的变更检测。可以在加载数据时就预计算好图表数据，存到行对象中：

// 加载表格数据的方法
loadTableData() {
  this.yourDataService.getRows().subscribe(rawRows => {
    // 为每行添加预计算的图表数据
    this.dataSource.data = rawRows.map(row => ({
      ...row,
      chartData: this.generateChartData(row)
    }));
  });
}

之后模板直接使用预计算好的数据：

<app-chart [datas]="row.chartData"></app-chart>

这样既避免重复计算，也能保证子组件渲染时数据已准备完成。

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