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

是的，可以退房 this 堆叠闪电战。

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

要注意的重要一点是，您需要确保扩展行中的表跨越所有列（除非您不希望这样做）。将详细信息行的attr.colspan属性设置为您要跨越的列数，通常只需使用length数组的displayedColumns即可跨越所有列。

我可以在垫扩展行中显示另一个表吗？

1 个答案: