css - Angular Material 粘性 header 停止工作

Question

我正在使用 Angular 和 Angular Material 8.0.1。在应用程序中，我有一个使用 mat-table 的表格插槽。我希望标题和一列被卡住，所以我一直在使用 sticky 关键字。直到最近，对于大多数用户来说，这一直在运行，但意外地停止了。我相信粘性标题和列在我开始使用 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 header 提供了所需的标记。

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