在material表格中增加一个可展开面板

需求：点击表格某一行，在其下面出现可展开面板以显示额外的东西；

解决：看了material官网，没有现成的轮子可以用，但是还是被我找到一个简易的添加在表格中的可展开面板。

table.html:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>No.</th>
    <td mat-cell *matCellDef="let element">
      <mat-expansion-panel
        hideToggle
        [expanded]="expandedRows[element.position]"
        (click)="expand(element)"
      >
        <mat-expansion-panel-header>
          {{element.position}}
        </mat-expansion-panel-header>
        123
        <div *ngFor="let child of element.children">{{ child.id }}</div>
      </mat-expansion-panel>
    </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">
      <mat-expansion-panel
        hideToggle
        [expanded]="expandedRows[element.position]"
        (click)="expand(element)"
      >
        <mat-expansion-panel-header>
          {{element.name}}
        </mat-expansion-panel-header>
        <div *ngFor="let child of element.children">{{ child.text }}</div>
      </mat-expansion-panel>
    </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef>Weight</th>
    <td mat-cell *matCellDef="let element">{{element.weight}}</td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef>Symbol</th>
    <td mat-cell *matCellDef="let element">{{element.symbol}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<pre>{{expandedRows | json}}</pre>

<!-- Copyright 2019 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

table.ts

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

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  children?: any[];
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: "Hydrogen", weight: 1.0079, symbol: "H" },
  { position: 2, name: "Helium", weight: 4.0026, symbol: "He" },
  { position: 3, name: "Lithium", weight: 6.941, symbol: "Li" },
  {
    position: 4,
    name: "Beryllium",
    weight: 9.0122,
    symbol: "Be",
    children: [
      { id: "4.1", text: "abc 4.1" },
      { id: "4.2", text: "abc 4.2" },
      { id: "4.3", text: "abc 4.3" },
    ]
  },
  { position: 5, name: "Boron", weight: 10.811, symbol: "B" },
  { position: 6, name: "Carbon", weight: 12.0107, symbol: "C" },
  { position: 7, name: "Nitrogen", weight: 14.0067, symbol: "N" },
  { position: 8, name: "Oxygen", weight: 15.9994, symbol: "O" },
  { position: 9, name: "Fluorine", weight: 18.9984, symbol: "F" },
  { position: 10, name: "Neon", weight: 20.1797, symbol: "Ne" }
];

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: "table-basic-example",
  styleUrls: ["table-basic-example.css"],
  templateUrl: "table-basic-example.html"
})
export class TableBasicExample {
  displayedColumns: string[] = ["position", "name", "weight", "symbol"];
  dataSource = ELEMENT_DATA;

  expandedRows: { [key: number]: boolean } = {};

  expand(element: PeriodicElement) {
    this.expandedRows[element.position] = !this.expandedRows[element.position]
  }
}

/**  Copyright 2019 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

table.scss:

table {
  width: 100%;
}

.mat-expansion-panel {
  border-radius: 0;
  box-shadow: none;
}
.mat-expansion-panel-body {
    padding: 0;
}

.mat-expansion-panel-header {
  padding: 0; 
}

可以添加我的v（jinji3261），一起学习前端知识