角材料表粘在标题上不起作用答案

【问题标题】：Angular material table sticky not working on header角材料表粘在标题上不起作用
【发布时间】：2020-04-30 17:42:26
【问题描述】：

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

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

我邀请一切顺利，一切正常，因为下面几行中的粘性也有效。我可以做些什么来修复这个错误，以便在标题中也可以使用粘性？

【问题讨论】：

您是否遇到任何错误？而且，您提到了“横向”滚动。您的代码中的实现是为了让标题贴在垂直滚动上，不确定这是否是您的意图
我没有收到任何错误，是的，滚动是横向完成的，但是列的前两行是粘性的，所以当我滚动标题时，标题不会粘在上面，所以你可以'不知道桌子上有什么，这就是问题@Kisinga
请提供截图
我把它添加到原帖@Kisinga

标签： angular angular-material

【解决方案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>

这里有一个代码 sn-p：https://stackblitz.com/edit/angular-uzg5aa?embed=1&file=src/app/table-selection-example.html

【讨论】：

也有一些只在共享代码中被遗漏了，但我写了下面的行在标题中单独使用sticky是行不通的。
我还补充了我的代码，因此它被包含在内。 @Andrea Epifano
尝试在代码 sn-p:stackblitz.com/edit/angular-uzg5aa?embed=1&file=src/app/… 中做类似的事情，单独使用粘性似乎行不通。
我只有几列，我只想将前两列设置为粘性，这可行，只是由于某种原因它在标题中不起作用，我想找到一种方法由于滚动而使其保持粘性。由于我的表中有很多列，这就是为什么我将粘性放在列而不是行上，但它在列的标题之外工作，只有标题滑动。 @Andrea Epifano

【解决方案2】：

您正在寻找的是粘性列，而不是粘性标题，您可以将两者结合起来 Here's an example

当您有多个表格项目并且您“向下”或垂直滚动时，粘性标题应保持可见。当单个表格列“横向”滚动或水平滚动时，粘性列仍然可见，如屏幕截图所示。看看documentation

【讨论】：