Angular 6 Material Table Sticky Header 不起作用 [英] Angular 6 Material Table Sticky Header doesn't work

问题描述

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

I need to make the Header of the mat-table component fixed to the top, But It doesn't work.

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

I have Angular v6.1.7 and @angular/material v6.4.7.

我将 "sticky: true" 属性添加到 matHeaderRowDef 作为 有人在这里提到 但它没有做任何事情:(

I added the "sticky: true" propertie to the matHeaderRowDef as someone mentions here but it doesn't do anything :(

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

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

这是我对 TS 文件的导入:

This is my imports on the TS file:

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

推荐答案

您的问题可能不是粘性行本身.你需要在你的桌子周围添加一个容器，以确保一行可以用这些样式粘在顶部，例如:

Your problem may be not the sticky row itself. You need to add a container around your table to make sure a row can be sticky at top with these styles for example:

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

参见 Angular Material 文档示例:https://material.angular.io/components/table/overview#sticky-rows-and-columns 并检查 CSS 标签.

See example on Angular Material documentation: https://material.angular.io/components/table/overview#sticky-rows-and-columns and also check the CSS-tab.

这篇关于Angular 6 Material Table Sticky Header 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！