在使用mat-*元素时，如何使用可扩展行示例修复此材料表

import { MatTableModule, MatExpansionModule } from '@angular/material';

<mat-table [dataSource]="dataSource">
  <!-- 表格列定义 -->
  <ng-container matColumnDef="column1">
    <mat-header-cell *matHeaderCellDef>列1</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.column1}}</mat-cell>
  </ng-container>

  <!-- 其他列定义 -->

  <!-- 可扩展行定义 -->
  <ng-container matColumnDef="expandedDetail">
    <mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            扩展行内容
          </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-panel-description>
          <!-- 扩展行的详细内容 -->
          {{element.expandedDetail}}
        </mat-panel-description>
      </mat-expansion-panel>
    </mat-cell>
  </ng-container>

  <!-- 列头部分 -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <!-- 行定义 -->
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  <!-- 可扩展行定义 -->
  <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"></mat-row>
</mat-table>

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  displayedColumns = ['column1', 'column2', 'column3'];
  dataSource = [
    { column1: '数据1', column2: '数据2', column3: '数据3', expandedDetail: '扩展行内容1' },
    { column1: '数据4', column2: '数据5', column3: '数据6', expandedDetail: '扩展行内容2' },
    // 其他数据行
  ];

  isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('expandedDetail');
}