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

在Angular Material 2的md-table中创建子表可以通过以下步骤实现：

首先，确保已经安装了Angular Material库，并在项目中导入所需的模块。
在HTML模板中，使用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>

通过以上步骤，你可以在Angular Material 2的md-table中创建一个带有子表的表格。点击展开/折叠按钮时，子表将显示或隐藏。你可以根据需要自定义子表的内容和样式。

腾讯云相关产品和产品介绍链接地址：