使Angular表行可扩展

Question

  

我想在我的Angular材料mat-table中创建整行   展开式：

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

      <!-- ArticleNumber Column -->  
      <ng-container matColumnDef="articleNumber">
        <mat-header-cell *matHeaderCellDef>
          <b>Article Number</b>
        </mat-header-cell>
        <mat-cell *matCellDef="let item">{{item.articleNumber}}</mat-cell>
      </ng-container>


      <!-- Payment Column -->
      <ng-container matColumnDef="payment">
        <mat-header-cell *matHeaderCellDef>
          <b>Payment</b></mat-header-cell>
        <mat-cell *matCellDef="let item">{{item.payment}}</mat-cell>
      </ng-container>

      <!-- DeliveryTime Column -->
      <ng-container matColumnDef="deliveryTime">
        <mat-header-cell *matHeaderCellDef>
          <b>Delivery Time</b>
        </mat-header-cell>
        <mat-cell *matCellDef="let item">{{item.deliveryTime}}</mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

      <mat-row *matRowDef="let basketItem; columns: displayedColumns;" (click)="onSelect(basketItem)"></mat-row>

</mat-table>

所以我有3列，分别是 ArticleNumber ， Payment 和 DeliveryTime 。

  

当我单击一行时，扩展面板应显示一些内容。

以下是这种panel的基本用法：

<mat-accordion>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        ROW 1
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>ROW 1 CONTENT visible because I am clicked</p>
  </mat-expansion-panel>

  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        ROW 2
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>ROW 2 CONTENT visible because I am clicked</p>
  </mat-expansion-panel>

</mat-accordion>

  

具有可扩展行的表是否可行？