Angular материал таблицы не работает на заголовке

Question

Я хочу использовать параметр закрепления таблицы материалов, но по какой-то причине он не работает в заголовке таблицы, он хорошо работает в следующих разделах, он просто скользит в заголовке при прокрутке вбок.

Вот код HTML:

<div class="table-container">
      <table mat-table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="select" sticky>
          <th mat-header-cell *matHeaderCellDef class="px-2 w-50px">
            <div class="pr-3">
              <mat-checkbox (change)="$event ? masterToggle() : null" color="warn"
                [checked]="selection.hasValue() && isAllSelected()"
                [indeterminate]="selection.hasValue() && !isAllSelected()" [attr.aria-label]="checkboxLabel()">
              </mat-checkbox>
            </div>
          </th>
          <td mat-cell *matCellDef="let row" class="px-2 w-50px">
            <div class="pr-3">
              <mat-checkbox (click)="$event.stopPropagation()" color="warn"
                (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                [attr.aria-label]="checkboxLabel(row)">
              </mat-checkbox>
            </div>
          </td>
        </ng-container>

        <!-- name -->
        <ng-container matColumnDef="name" sticky>
          <th mat-header-cell *matHeaderCellDef class="pl-3">
            <div class="d-flex flex-column pl-0 pr-2">
              <div mat-sort-header>
                Name
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let element">
            <div>
              <!-- ... -->
            </div>
          </td>
        </ng-container>

        <!-- ... -->

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

</div>

Я приглашаю все хорошо, все работает, так как липкое в строках ниже также работает. Что я могу сделать, чтобы исправить ошибку, чтобы стикер тоже работал в шапке?

Answer 1

Вам нужно показать больше кода, чтобы помочь вам. Кажется, что строки tr в таблице отсутствуют. Попробуйте добавить значение: "sticky: true" в атрибут *matHeaderRowDef, например:

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
    (click)="selection.toggle(row)">
</tr>

Вот фрагмент кода: https://stackblitz.com/edit/angular-uzg5aa?embed=1&file=src / app / table-selection-example. html

Answer 2

Вам нужен липкий столбец, а не липкий заголовок, поскольку вы можете комбинировать оба Вот пример

Липкие заголовки должны оставаться видимыми, когда у вас несколько элементы таблицы, и вы прокручиваете «вниз» или вертикально. Липкие столбцы остаются видимыми, когда отдельный столбец таблицы прокручивается «вбок» или горизонтально, как показано на скриншоте. Взгляните на документацию