Angular 6材质表粘贴标头不起作用 [英] 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和@角/材质v6.4.7。
I have Angular v6.1.7 and @angular/material v6.4.7.
我在matHeaderRowDef中添加了 sticky:true属性,为有人在这里提到,但它什么也没做:(
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>
I拥有以下示例项目: https://stackblitz.com/edit/angular-wem2qa
I have this example project: 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材质表粘贴标头不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!