角材料固定表头

Question

This appears to be a know issue but there doesn't seem to be a solution yet. after installing the Angular fixed table header to keep the column titles visible. when I add the fix-head attribute to the <thead> this error appears in the console:

Controller 'mdtable', required by directive 'mdcolumn', can't be found thead md-head="" md-order hidden;"

From the research I've it seems to have to do with ui-router or ng-if. In my case it works for my first page when the browser reloads but on my other pages I get this issue in the console. Here is the site I used to install the fixed header: https://github.com/daniel-nagy/fixed-table-header

Answer 1

我发现如果用ng-if或ui-view将其包裹在div上是行不通的

Answer 2

i just added another table with the same setting and no data source. just mention that in css style position of new table is absolute and an empty is also added because without that this new table would cover a part of scrollbar. 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