Angular Materials展开和折叠表格单元？

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let element">
      {{element.name}}
      <button mat-icon-button (click)="toggleDetails(element)">
        <mat-icon>{{element.expanded ? 'expand_less' : 'expand_more'}}</mat-icon>
      </button>
    </mat-cell>
  </ng-container>
  
  <!-- 其他列的定义 -->
  
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  <mat-row *matRowDef="let row; columns: ['details']; when: isExpansionDetailRow"></mat-row>
</mat-table>

<ng-template #expandedDetail let-element>
  <!-- 展开的内容 -->
</ng-template>

export class MyComponent {
  dataSource: MatTableDataSource<any>;
  displayedColumns: string[] = ['name', 'otherColumn1', 'otherColumn2'];
  expandedElement: any | null;

  constructor() {
    // 初始化数据源
    this.dataSource = new MatTableDataSource<any>(yourDataArray);
  }

  toggleDetails(element: any): void {
    this.expandedElement = this.expandedElement === element ? null : element;
  }

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