Angular 6材质表粘贴标头不起作用

时间:2018-10-08 17:42:19

标签: angular angular-material material angular-material-6

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

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

我以someone mentions here的形式向matHeaderRowDef添加了“ sticky:true”属性,但它没有做任何事情:(

<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";

3 个答案:

答案 0 :(得分:4)

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

vecs[:, n]

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

答案 1 :(得分:0)

似乎在IE中不再支持这种功能。摘自the documentation

Chrome,Firefox,Safari和Edge支持此功能。 IE中不支持该功能,但它确实会正常失败,因此行不会卡住。

另一种选择是从Java脚本手动处理它,但这对于像IE这样的旧浏览器来说将非常昂贵。

答案 2 :(得分:0)

如果您正在研究<mat-tab-group>,这是与此相关的问题。

某些情况下的解决方案详细说明:https://github.com/angular/components/issues/16283