Сделать строку углового стола расширяемой - PullRequest
Новая
       14

Сделать строку углового стола расширяемой

0 голосов
/ 10 сентября 2018

Я хочу сделать весь ряд моего углового материала столик для матов расширяемая: 

<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 .

Когда я щелкаю строку, панель расширения должна отображать некоторый контент.

Вот основное использование такой панели : 

<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>

Можно ли выполнить таблицу с расширяемыми строками?

...