Липкие заголовки углового материала перестали работать - PullRequest
0 голосов
/ 18 июня 2019

Я использую угловой и угловой материал 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;
}

Я ожидаю, что заголовки и первый столбец будут липкими, но это не так.

1 Ответ

0 голосов
/ 19 июня 2019

Вы устанавливаете несколько flex-стилей для контейнеров sidenav? или просто использовать стандартные? попробуйте добавить несколько определений flex в оболочку содержимого, чтобы проверить, обеспечивает ли это требуемую разметку для заголовков Sticky.

Я бы тоже изучил исходный код, чтобы лучше узнать их подход и искать известные конфликты или требования на стороне браузера

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...