如何在Angular Material 2的md-table中创建子表？

<md-table>
  <!-- 表头 -->
  <md-header-row *mdHeaderRowDef="columns"></md-header-row>
  <!-- 表内容 -->
  <md-row *mdRowDef="let row; columns: columns;"></md-row>
</md-table>

export class MyComponent {
  columns = ['Name', 'Age', 'Email'];
  data = [
    { name: 'John', age: 25, email: 'john@example.com' },
    { name: 'Jane', age: 30, email: 'jane@example.com' },
    { name: 'Bob', age: 35, email: 'bob@example.com' }
  ];
}

<md-table>
  <!-- 表头 -->
  <md-header-row *mdHeaderRowDef="columns"></md-header-row>
  <!-- 表内容 -->
  <md-row *mdRowDef="let row; columns: columns;"></md-row>
  <!-- 子表 -->
  <ng-container *ngFor="let row of data">
    <md-row>
      <md-cell>
        <button md-icon-button (click)="row.expanded = !row.expanded">
          <md-icon>{{ row.expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</md-icon>
        </button>
      </md-cell>
      <md-cell *ngFor="let column of columns">{{ row[column] }}</md-cell>
    </md-row>
    <md-row *ngIf="row.expanded">
      <md-cell colspan="{{ columns.length + 1 }}">
        <!-- 子表内容 -->
        <p>This is the subtable for {{ row.name }}</p>
      </md-cell>
    </md-row>
  </ng-container>
</md-table>