Я использую угловой и угловой материал 8.0.1.В приложении у меня был слот столов с использованием mat-table.Я хочу, чтобы заголовки и один столбец были заморожены, поэтому я использовал ключевое слово sticky.До недавнего времени это работало для большинства пользователей, но неожиданно прекратилось.Я полагаю, что липкие заголовки и столбцы перестали работать примерно в то же время, когда я начал использовать sidenav Angular Material.
Я прочитал другую документацию и не нашел ничего, что бы мне показалось.
Одна вещь, которая, как я обнаружил, заставляет работать липкие заголовки, это помещать таблицу в div с заданной высотой и автоматическим переполнением.Странно, что липкие заголовки работают только при использовании полосы прокрутки этой таблицы, а не браузера.Я также не хочу устанавливать высоту таблиц, поскольку на страницах их несколько, и хочу, чтобы они занимали столько места, сколько им нужно.И если я установлю высоту на 100%, липкие заголовки перестанут работать;Я думаю, потому что полоса прокрутки таблицы теперь исчезла.
Вот советы, которые я использовал безрезультатно:
https://stackoverflow.com/a/52707760/11665680 https://stackoverflow.com/a/52474361/11665680
export class TeamLeaderboardComponent {
columnsToDisplay = ['player', 'gamesPlayed', 'gamesWon', 'gamesLost', 'winningPercentage', 'kills','deaths','assists'];
sort: MatSort;
dataSource: PlayerServiceRecordDataSource;
@Input('dataSource')
set setDataSource(playerServiceRecords: PlayerServiceRecord[]) {
this.dataSource = new PlayerServiceRecordDataSource(playerServiceRecords);
if (this.sort) {
this.dataSource.sort = this.sort;
}
}
@ViewChild(MatSort, {static: true})
set setSort(sort: MatSort) {
this.sort = sort;
}
}
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="player" sticky>
<th class="text" scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>Player</th>
<td class="text" mat-cell *matCellDef="let playerServiceRecord"><a routerLink="/players/{{playerServiceRecord.player.id}}"><img class="small" src="{{playerServiceRecord.player.emblemUrl}}">{{playerServiceRecord.player.gamertag}}</a></td>
</ng-container>
<ng-container matColumnDef="gamesPlayed">
<th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>GP</th>
<td mat-cell *matCellDef="let playerServiceRecord">{{playerServiceRecord.serviceRecord.gamesPlayed}}</td>
</ng-container>
<ng-container matColumnDef="gamesWon">
<th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>W</th>
<td mat-cell *matCellDef="let playerServiceRecord">{{playerServiceRecord.serviceRecord.gamesWon}}</td>
</ng-container>
<ng-container matColumnDef="gamesLost">
<th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>L</th>
<td mat-cell *matCellDef="let playerServiceRecord"> {{playerServiceRecord.serviceRecord.gamesLost}}</td>
</ng-container>
<ng-container matColumnDef="winningPercentage">
<th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>W%</th>
<td mat-cell *matCellDef="let playerServiceRecord"> {{playerServiceRecord.serviceRecord.winningPercentage | percent: '1.1-1'}}</td>
</ng-container>
<ng-container matColumnDef="kills">
<th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>Kills</th>
<td mat-cell *matCellDef="let playerServiceRecord"> {{playerServiceRecord.serviceRecord.kills}}</td>
</ng-container>
<ng-container matColumnDef="deaths">
<th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>Deaths</th>
<td mat-cell *matCellDef="let playerServiceRecord"> {{playerServiceRecord.serviceRecord.deaths}}</td>
</ng-container>
<ng-container matColumnDef="assists">
<th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header>Assists</th>
<td mat-cell *matCellDef="let playerServiceRecord"> {{playerServiceRecord.serviceRecord.assists}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky: true"></tr>
<tr mat-row *matRowDef="let rowData; columns: columnsToDisplay"></tr>
</table>
<div class="main-container">
<mat-toolbar class="topnav">
<mat-toolbar-row>
<button fxShow="false" fxShow.xs="true" mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<mat-nav-list fxLayout="row">
<a mat-list-item routerLink="/">Website Title</a>
<a mat-list-item fxShow="true" fxShow.xs="false" routerLink="/lans">LANs</a>
<a mat-list-item fxShow="true" fxShow.xs="false" routerLink="/players">Players</a>
<a mat-list-item fxShow="true" fxShow.xs="false" routerLink="/leaderboards">Leaderboards</a>
</mat-nav-list>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #sidenav fixedInViewport fixedTopGap="56">
<mat-nav-list>
<a mat-list-item routerLink="/lans">LANs</a>
<a mat-list-item routerLink="/players">Players</a>
<a mat-list-item routerLink="/leaderboards">Leaderboards</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<section>
<router-outlet></router-outlet>
</section>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
.main-container {
display: flex;
flex-direction: column;
flex: 1 0 auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sidenav-container {
flex: 1 0 auto;
}
Я ожидаю, что заголовки и первый столбец будут липкими, но это не так.