javascript - mat-expanded satırının içinde başka bir tablo görüntüleyebilir miyim?

Genişletilmiş bir satıra sahip bir mat-table'ım var. Bir satıra tıkladığımda genişliyor ve sabit bir metin gösteriyor. Genişletilmiş satırın içinde başka bir tablo göstermek istiyorum. Bu mümkün mü? Alternatif olarak, yapmak istediğimi başarmak için başka herhangi bir teknik veya yöntem var mı? Belirli bir zaman dilimi için yürütülen İşlerin listesini görüntülemeye çalışıyorum. Ana satırda sadece zaman dilimini göstermek istiyorum, örneğin 01-01-2017'den 01-05-2017'ye ve bir kullanıcı o satıra tıkladığında satır genişleyecek ve diğer detaylarla birlikte tarih, saat, kullanıcı, durum vb. bilgileri içeren işlerin listesi görüntülenecek.

HTML için Kod :-

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

Cevap #1

Evet yapabilirsin, bu stackblitz'e göz at.

Sadece normalde yapacağınız gibi başka bir mat-table ekleyin, veri kaynağı, sütun tanımları vb. dahil.

Dikkate alınması gereken önemli bir şey, genişletilmiş satırınızdaki tablonun tüm sütunları kapsadığından emin olmanız gerektiğidir (istemiyorsanız kapsamasına gerek yoktur). Detay satırının attr.colspan özniteliğini kapsamak istediğiniz sütun sayısına ayarlayın, genellikle tüm sütunları kapsamak için displayedColumns dizinizin length değerini alabilirsiniz.