Angular Material 表粘性不适用于标题

Question

我想使用 Material 表粘性参数，但由于某种原因它在表头中不起作用，它在下面的部分中工作得很好，当我横向滚动时它只是在表头中滑动。

这是 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