У меня есть мат-таблица с расширенным рядом.Если щелкнуть строку, она развернется и отобразит жестко закодированную строку.Я хотел бы отобразить другую таблицу внутри расширенной строки.Является ли это возможным?В качестве альтернативы, есть ли другой метод или метод для достижения того, что я пытаюсь сделать.Я пытаюсь отобразить список выполненных заданий за определенный период времени.В основной строке я хочу показать только период времени, например 01-01-201 TO 01-05-2017, и когда пользователь нажимает на эту строку, он развернется и отобразит список заданий с другими сведениями, такими как дата, время, пользователь, статус и т. д. будет отображаться
Код для HTML: -
<mat-table [dataSource]="jobExecutionStat">
<!-- Id Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef>
Serial Number
</mat-header-cell>
<mat-cell *matCellDef="let element; let i = index"
>{{ i + 1 }}
</mat-cell>
</ng-container>
<!-- Execution Date Column -->
<ng-container matColumnDef="executionDate">
<mat-header-cell *matHeaderCellDef>
Execution Date
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.executionDate | date: 'yyyy-MM-dd' }}
</mat-cell>
</ng-container>
<!-- After Time Period Column -->
<ng-container matColumnDef="afterTimePeriod">
<mat-header-cell *matHeaderCellDef>
Current Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.afterTimePeriod }}
</mat-cell>
</ng-container>
<!-- Previous Time Period Column -->
<ng-container matColumnDef="previousTimePeriod">
<mat-header-cell *matHeaderCellDef>
Previous Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.previousTimePeriod }}
</mat-cell>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.status }}
</mat-cell>
</ng-container>
<!-- Code for Stop and Re-Run Buttons -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element; let index = index">
<button
*ngIf="index === 0"
mat-icon-button
(click)="stop_exec_job(element)"
matTooltip="Stop Executing the Job"
[disabled]="
element.status == 'SUCCESS' ||
element.status == 'FINISH' ||
element.status == 'CANCELLED'
"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
<!-- Delete icon for row -->
<button
*ngIf="index === 0"
mat-icon-button
(click)="re_run_job(element)"
matTooltip="Re-Run the Job"
[disabled]="
element.status == 'RUNNING' ||
element.status == 'Pending'
"
>
<i class="material-icons" style="color:green">
cached
</i>
</button>
</mat-cell>
</ng-container>
<!-- Code for Spinner -->
<ng-container matColumnDef="spinner">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element">
<div
*ngIf="
element.status == 'Running';
else doNotShowSpinner
"
>
<mat-spinner
mode="indeterminate"
[diameter]="20"
></mat-spinner>
</div>
<ng-template #doNotShowSpinner> </ng-template>
</mat-cell>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let detail">
Sample Text
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="jobExecStatDisplayedColumns"
></mat-header-row>
<mat-row
*matRowDef="let row; columns: jobExecStatDisplayedColumns"
matRipple
class="element-row"
[class.expanded]="expandedElement == row"
(click)="
expandedElement === row
? (expandedElement = null)
: (expandedElement = row)
"
>
</mat-row>
<mat-row
*matRowDef="
let row;
columns: ['expandedDetail'];
when: isExpansionDetailRow
"
[@detailExpand]="
row.element == expandedElement ? 'expanded' : 'collapsed'
"
style="overflow: hidden"
>
</mat-row>
</mat-table>