Angular中cdk-row下嵌套子表不显示的问题求助

问题原因 #

你直接在cdk-row的<tr>标签内添加额外的<td>是无效的——CDK Table会严格按照*cdkRowDef指定的列配置渲染单元格，额外的内容会被框架忽略，因此子表元素根本不会被渲染到DOM中。

修复方案 #

使用CDK Table的multiTemplateDataRows特性，为数据行定义两个模板：主数据行和子表行。

1. 模板修改 #

<table cdk-table [dataSource]="ELEMENT_DATA" multiTemplateDataRows>
  <!-- 列定义部分保持不变 -->
  <ng-container cdkColumnDef="position">
    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container cdkColumnDef="name">
    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container cdkColumnDef="weight">
    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container cdkColumnDef="symbol">
    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <!-- 表头行 -->
  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>

  <!-- 主数据行模板（点击可展开/收起子表） -->
  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;" 
      (click)="expandedRow = expandedRow === row ? null : row"></tr>

  <!-- 子表行模板 -->
  <tr cdk-row *cdkRowDef="let row; columns: ['detailRow']" [hidden]="expandedRow !== row"></tr>

  <!-- 子表列定义 -->
  <ng-container cdkColumnDef="detailRow">
    <td cdk-cell *cdkCellDef="let row" colspan="4">
      <table style="width: 100%; margin-top: 10px; border-top: 1px solid #eee;">
        <tr>
          <th style="width: 30%;">Detail</th>
          <th>Value</th>
        </tr>
        <tr *ngFor="let detail of row.details">
          <td>{{ detail.name }}</td>
          <td>{{ detail.value }}</td>
        </tr>
      </table>
    </td>
  </ng-container>
</table>

2. 组件代码补充 #

在组件类中添加控制展开状态的变量，并确保数据结构正确：

expandedRow: any;

// 示例数据（需保证每个项包含details数组）
ELEMENT_DATA = [
  {
    position: 1,
    name: 'Hydrogen',
    weight: 1.0079,
    symbol: 'H',
    details: [
      { name: 'Atomic Number', value: 1 },
      { name: 'Boiling Point', value: '-252.87°C' }
    ]
  },
  {
    position: 2,
    name: 'Helium',
    weight: 4.0026,
    symbol: 'He',
    details: [
      { name: 'Atomic Number', value: 2 },
      { name: 'Boiling Point', value: '-268.93°C' }
    ]
  }
];

displayedColumns = ['position', 'name', 'weight', 'symbol'];

3. 额外检查点 #

• 确认ELEMENT_DATA中的每一项都存在details数组且有数据；
• 确保已正确导入CdkTableModule到你的Angular模块中；
• 若不需要点击展开功能，直接移除[hidden]指令和点击事件，子表会默认显示。

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