У меня есть приложение, которое требует использования расширяющейся таблицы, чтобы показать более подробную информацию, чем в столбцах. У меня уже есть таблица, и я следую приведенному здесь примеру https://stackblitz.com/angular/gdbrmljnogk?file=src%2Fapp%2Ftable-expandable-rows-example.html.
Теперь я могу заставить развернутую строку отображаться и скрываться при последующих щелчках, однако моя проблема в том, что что расширенная строка появляется в верхней части строки таблицы, а не внизу и толкает другие строки вниз. Я вижу, как добавляются элементы CSS при срабатывании и удалении триггера при его повторном запуске или в другом ряду, но что-то внутри моего CSS не показывает правильно развернутый ряд.
I Я бы поставил все на 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 в данный момент времени.
Любая помощь или указатели по этому вопросу будут с благодарностью.