Javascript 我可以在扩展行内显示另一张表吗？

我有一张铺有扩展行的垫子桌子。如果我单击一行，它将展开并显示一个硬编码字符串。 我想在展开的行中显示另一个表。可能吗？ 或者，是否有其他技术或方法来实现我正在尝试的目标。 我试图显示给定时间段内已执行作业的列表。 在主行上，我只想显示时间段，如2017年1月1日至2017年5月1日，当用户单击该行时，它将展开并显示作业列表，以及其他详细信息，如日期、时间、用户、状态等。。将显示

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>

序列号
{{i+1}}
执行日期
{{element.executionDate}日期：'yyyy-MM-dd'}
当前时间段
{{element.afterTimePeriod}
上一时段
{{element.previousTimePeriod}
地位
{{element.status}
停止
缓存
示例文本

是的，你可以，退房 斯塔克闪电战

只需像平常一样添加另一个

mat表

，包括数据源、列定义等

需要注意的一点是，您需要确保扩展行中的表跨越所有列（除非您不希望这样）。将详细信息行的

attr.colspan

属性设置为要跨越的列数，通常您只需将

displayedColumns

数组的

length

设置为跨越所有列