展开和折叠angular material中的表行

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

  <ng-container matColumnDef="column2">
    <mat-header-cell *matHeaderCellDef>列2</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.column2}}</mat-cell>
  </ng-container>

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

  <!-- 行定义 -->
  <mat-row *matRowDef="let row; columns: displayedColumns;"></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: string[] = ['column1', 'column2'];
  dataSource = [
    { column1: '数据1', column2: '数据2' },
    { column1: '数据3', column2: '数据4' },
    // 其他数据...
  ];
}

<mat-table [dataSource]="dataSource">
  <!-- 列定义... -->

  <!-- 行定义 -->
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  <mat-row *matRowDef="let row; columns: ['detailRow']" class="detail-row"></mat-row>
</mat-table>

<ng-container matColumnDef="detailRow">
  <mat-cell *matCellDef="let row" [attr.colspan]="displayedColumns.length">
    <button mat-icon-button (click)="toggleDetail(row)">
      <mat-icon>{{row.expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>
    </button>
    <div [@detailExpand]="row.expanded ? 'expanded' : 'collapsed'">
      <!-- 展开内容 -->
    </div>
  </mat-cell>
</ng-container>

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class TableComponent {
  displayedColumns: string[] = ['column1', 'column2'];
  dataSource = [
    { column1: '数据1', column2: '数据2', expanded: false },
    { column1: '数据3', column2: '数据4', expanded: false },
    // 其他数据...
  ];

  toggleDetail(row: any) {
    row.expanded = !row.expanded;
  }
}