Question

我有一个应用程序，该应用程序需要使用扩展表，以显示比列中更大的细节。我的表格已经可以使用，并且一直在这里的示例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上运行。

在此问题上的任何帮助或指示，将不胜感激。

Answer 1

按照链接https://stackblitz.com/angular/gdbrmljnogk?file=src%2Fapp%2Ftable-expandable-rows-example.css中给出的示例，我不得不删除“ height：0;”。来自detail-row类，以便使其按预期工作。

不确定为什么要在示例中运行，但在我的应用程序中无法运行，但是嘿。睡了这个问题后，我在今天重新启动后的几分钟内就发现了问题，尽管如此。

为了将来对其他人有用，我将在此处保留问题和解决方案。

角材料扩展表

1 个答案: