角材料粘性标题停止工作

Question

我正在使用 Angular 和 Angular Material 8.0.1。在应用程序中，我有一个使用 mat-table 的表槽。我希望标题和一列被冻结，所以我一直在使用粘性关键字。对于大多数用户来说，这一直有效，但出乎意料地停止了。我相信在我开始使用 Angular Material 的 sidenav 的同时，粘性标题和列停止工作。

我已经阅读了不同的文档，但没有发现任何让我印象深刻的东西。

我发现使粘性标题起作用的一件事是将表格放在具有设定高度和自动溢出的 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;
}

我希望标题和第一列具有粘性，但事实并非如此。

Answer 1

您是否为 sidenav 容器设置了一些 flex 样式？还是只使用默认的？尝试将一些 flex 定义添加到内容包装器中，看看是否为 Sticky 标头提供了所需的标记。

我也会研究源代码，以更好地了解他们的方法并在浏览器端搜索已知的冲突或要求