Angular Material可展开行+包裹表格自定义详情无法显示的修复方法

步骤1：修正子组件模板的上下文传递 #

在table-wrapper.component.html的展开行单元格模板中，确保ngTemplateOutletContext正确传递当前行数据，且上下文键名与父组件模板接收的变量匹配：

<ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
    <div class="example-element-detail"
         [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
      <!-- 使用$implicit作为默认上下文键，父组件可直接用let-变量接收 -->
      <ng-container *ngTemplateOutlet="expandedDetailTemplate; context: { $implicit: element }"></ng-container>
    </div>
  </td>
</ng-container>

步骤2：父组件正确接收上下文数据 #

在app.component.html的自定义详情模板中，通过let-变量名接收子组件传递的行数据：

<app-table-wrapper [dataSource]="dataSource" [displayedColumns]="displayedColumns">
  <!-- let-data接收子组件传递的当前行数据 -->
  <ng-template #expandedDetailTemplate let-data>
    <div class="p-4">
      <h3>自定义详情内容</h3>
      <p>ID: {{data.id}}</p>
      <p>名称: {{data.name}}</p>
      <p>进度: {{data.progress}}%</p>
    </div>
  </ng-template>
</app-table-wrapper>

步骤3：确保子组件正确获取模板引用 #

在table-wrapper.component.ts中，通过@ContentChild准确获取父组件传递的模板：

import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-table-wrapper',
  templateUrl: './table-wrapper.component.html',
  styleUrls: ['./table-wrapper.component.css']
})
export class TableWrapperComponent {
  @Input() dataSource!: MatTableDataSource<any>;
  @Input() displayedColumns!: string[];
  expandedElement: any | null;
  // 获取父组件传入的详情模板
  @ContentChild('expandedDetailTemplate') expandedDetailTemplate!: TemplateRef<any>;
}

关键说明 #

• 若使用自定义键名传递上下文（比如context: { row: element }），父组件需对应使用let-row="row"接收数据；使用$implicit可简化为直接let-变量名。
• 必须保证子组件通过@ContentChild成功获取到父组件的模板引用，否则ngTemplateOutlet无法找到要渲染的内容。

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