javascript - 我可以在 mat-expanded 行中显示另一个表格吗？

Question

我有一个带有扩展行的垫子表。如果我单击一行，它会展开并显示一个硬编码字符串。 我想在展开的行内显示另一个表格。是否可以？ 或者，是否有任何其他技术或方法可以实现我正在尝试做的事情。 我正在尝试显示给定时间段内已执行作业的列表。 在主行上，我只想显示 01-01-2017 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>

Answer 1

Yes you can, check out this stackblitz.

只需像往常一样添加另一个 mat-table，包括数据源、列定义等。

需要注意的重要一点是，您需要确保展开行中的表格跨越所有列(除非您不想这样做)。将详细信息行的 attr.colspan 属性设置为您想要跨越的列数，通常您可以只取 displayedColumns 的 length > 跨越所有列的数组。