Angular 8:如何在单击行时切换多行，以及如何在单个按钮上单击Angular Material Table展开所有行？

<mat-table [dataSource]="dataSource">

  <!-- 定义表头 -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
  </ng-container>

  <!-- 定义可展开的行 -->
  <ng-container matColumnDef="expandedDetail">
    <mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
      <div class="detail-row" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <!-- 在这里放置展开的内容 -->
        {{ element.details }}
      </div>
    </mat-cell>
  </ng-container>

  <!-- 显示表头和表体 -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"
           (click)="toggleRow(row)">
  </mat-row>
  <mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></mat-row>

</mat-table>

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  dataSource = ELEMENT_DATA;
  displayedColumns = ['name'];
  expandedElement: any;

  toggleRow(row) {
    this.expandedElement = this.expandedElement === row ? null : row;
  }
}

const ELEMENT_DATA = [
  { name: 'Row 1', details: 'Details for Row 1' },
  { name: 'Row 2', details: 'Details for Row 2' },
  { name: 'Row 3', details: 'Details for Row 3' },
  { name: 'Row 4', details: 'Details for Row 4' }
];

.detail-row {
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

.detail-row.collapsed {
  max-height: 0;
}

.detail-row.expanded {
  max-height: 100px; /* 设置展开的最大高度 */
}

<button mat-raised-button (click)="expandAllRows()">展开所有行</button>

expandAllRows() {
  this.dataSource.forEach(row => this.expandedElement = row);
}