angular - Angular Material 固定表头

Question

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

找不到指令“mdcolumn”所需的控制器“mdtable”

从我的研究来看，它似乎与 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>

图片