html - 角材料扩展表

问题描述

我有一个应用程序需要使用扩展表，以便显示比列中更多的细节。我的表已经在工作，并且一直在遵循这里的示例https://stackblitz.com/angular/gdbrmljnogk?file=src%2Fapp%2Ftable-expandable-rows-example.html。

现在，我可以在后续单击时显示和隐藏展开的行，但是，我的问题是展开的行出现在表格行的顶部，而不是在下面并将其他行向下推。我可以看到 CSS 元素被添加，触发器在再次触发或在另一行触发时被触发和删除，但我的 CSS 中的某些内容仍然无法正确显示展开的行。

我会把所有东西都放在 stackblitz 上，但它与应用程序非常集成，很难以与独立项目相同的方式工作。我遇到的问题如下所示。

这是相关部分的 HTML。

    <div fxFlex.gt-sm="100%" fxFlex="100">
    <mat-card>
        <mat-card-header>
            <mat-card-title>
                Incomplete Change Requests.
            </mat-card-title>
            <mat-card-subtitle>
                These are change requests which have been authorised and need to be marked as completed.
            </mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <div class="mat-elevation-z8">

                <div class="loading-shade" *ngIf="isLoadingResults">
                    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
                </div>

                <div class="table-container">

                    <mat-table [dataSource]="data" matSort class="table" #Table #TableSort="matSort" multiTemplateDataRows>

                        <ng-container matColumnDef="jobNumber" sticky>
                            <mat-header-cell *matHeaderCellDef mat-sort-header>Job #</mat-header-cell>
                            <mat-cell *matCellDef="let incomplete" (click)="changeDetails($event, row)">
                                <span style="text-decoration: underline; cursor:pointer;">{{ incomplete.jobNum}}</span>
                            </mat-cell>
                        </ng-container>

                        <ng-container matColumnDef="createdAt">
                            <mat-header-cell *matHeaderCellDef mat-sort-header>Created Date Time</mat-header-cell>
                            <mat-cell *matCellDef="let incomplete">{{ incomplete.createdDateTime}}</mat-cell>
                        </ng-container>

                        <ng-container matColumnDef="createdBy">
                            <mat-header-cell *matHeaderCellDef mat-sort-header>Created By</mat-header-cell>
                            <mat-cell *matCellDef="let incomplete">{{ incomplete.createdByEmail}}</mat-cell>
                        </ng-container>

                        <ng-container matColumnDef="changes">
                            <mat-header-cell *matHeaderCellDef mat-sort-header>Changes</mat-header-cell>
                            <mat-cell *matCellDef="let incomplete">{{ incomplete.changes}}</mat-cell>
                        </ng-container>

                        <ng-container matColumnDef="authorisedAt">
                            <mat-header-cell *matHeaderCellDef mat-sort-header>Authorised Date Time</mat-header-cell>
                            <mat-cell *matCellDef="let incomplete">{{ incomplete.authorisedDateTime}}</mat-cell>
                        </ng-container>

                        <ng-container matColumnDef="authorisedBy">
                            <mat-header-cell *matHeaderCellDef mat-sort-header>Authorised By</mat-header-cell>
                            <mat-cell *matCellDef="let incomplete">{{ incomplete.authorisedByEmail}}</mat-cell>
                        </ng-container>

                        <!-- Expanded Content Column. -->
                        <ng-container matColumnDef="expandedDetail">
                            <mat-cell *matCellDef="let element" [attr.colspan]="6">
                                <div class="element-detail"
                                    [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                                    <div style="border: 1px solid red;">
                                        This is a test
                                    </div>
                                </div>
                            </mat-cell>
                        </ng-container>

                        <!-- Main row definition. -->
                        <mat-row *matRowDef="let element; columns: displayedColumns;"
                                 class="element-row"
                                 [class.expanded-row]="expandedElement === element"
                                 (click)="expandedElement = (expandedElement === element) ? null : element">
                        </mat-row>

                        <!-- Expanded row definition. -->
                        <mat-row *matRowDef="let element; columns: ['expandedDetail']" class="detail-row"></mat-row>

                        <!-- Header row definition. -->
                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

                    </mat-table>

                </div>
            </div>
        </mat-card-content>
    </mat-card>
</div>

以及正在应用的 CSS（除了材料元素）。

.detail-row {
    height: 0px;
    min-height: 0px;
}

.element-row {
    border-bottom-width: 0;
}

.element-detail {
    overflow: hidden;
    display: flex;
    height: 30px;
}

md-row:nth-child(even) {
      background-color:#EDF1F5;
}

mat-row:nth-child(odd) {
      background-color:#FDFDFB;
}

.loading-shade {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 56px;
    right: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
.container {
    position: relative;
    min-height: 200px;
}

.table-container {
    min-height: 100px;
    position: relative;
    overflow: auto;
}
*/

.table {
      width: 100%;
}

mat-header-cell {
    display:flex;
    justify-content: center;
}

.mat-cell {
    display:flex;
    justify-content: center;
}

.mat-column-jobNumber {
    flex: 0 0 80px !important;
}

.mat-column-authorisedBy, .mat-column-createdBy, .mat-column-completedBy {
    word-wrap: break-word !important;
    white-space: unset !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

此刻它正在Angular 6上运行。

任何有关此事的帮助或指示将不胜感激。

标签： htmlcssangular-material

html - 角材料扩展表

问题描述

解决方案

推荐阅读