Angular 6 Material Table Sticky Header不起作用

Question

我需要将mat-table组件的Header固定在顶部，但它不起作用。

我有Angular v6.1.7和@ angular / material v6.4.7。

我将“sticky：true”属性添加到matHeaderRowDef作为someone mentions here，但它没有做任何事情:(

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

我有这个示例项目：https://stackblitz.com/edit/angular-wem2qa

这是我在TS文件上的导入：

import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from "@angular/core";
import { MatDialog, MatExpansionPanel, MatSnackBar, MatSort, MatTableDataSource, Sort } from "@angular/material";

Answer 1

您的问题可能不是粘性行本身。您需要在表周围添加一个容器，以确保行可以在这些样式的顶部粘贴，例如：

.example-container {
  height: 400px;
  overflow: auto;
}

请参阅Angular Material文档中的示例：https://material.angular.io/components/table/overview#sticky-rows-and-columns并查看CSS选项卡。