Question

这似乎是一个已知问题，但似乎还没有解决方案。安装Angular固定表头后，保持列标题可见。当我将fix-head属性添加到<thead>时，控制台中会出现此错误：

指令'mdcolumn'所需的控制器'mdtable'无法找到thead md-head =“”md-order hidden;“

从研究中我发现它似乎与ui-router或ng-if有关。在我的情况下，当浏览器重新加载时，它适用于我的第一页，但在我的其他页面上，我在控制台中遇到此问题。这是我用来安装固定标题的网站：https://github.com/daniel-nagy/fixed-table-header

Answer 1

我认为如果用ng-if或ui-view包裹div，它就不起作用

Answer 2

我刚刚添加了另一个具有相同设置且没有数据源的表。只提一下，在css风格的新表位置是绝对的并且还添加了一个空，因为没有它，这个新表将覆盖滚动条的一部分。 CSS：

.tables {
height: inherit;
position: relative;
display: flex;
width: 100%;
}
.table {
overflow: auto;
height: 100%;
width: 100%;
position: relative;
}
.full-width {
width: 100%;
}
.header-table {
position: relative;
width: 100%;
}
.header {
display: flex;
flex-direction: row;
position: absolute;
width: 100%;
  }



html code:

<div class="tables">
    <md-table
  [dataSource]="dataSource"
  class="table">
   //columns and header definitions.
</md-table> 
<div class="header">
  <md-table #table
    class="header-table">
    //the same definition for columns and header.
  </md-table>
  <div class="scroll-wrapper"></div>//div that covers the scrollbar.
</div>

image

Angular Material固定表头

2 个答案: