md-tab中的角度數據表的滾動功能

Question

我一直在尋找很多小時，但我無法找到有用的答案。請幫我解決這個問題。

問題：我在md-tab（Angular材質）中插入了角度數據表。 一切工作正常，直到我添加scrollY或scrollX選項。當我添加滾動選項時，表格沒有顯示任何內容。 下面是代碼

<md-tabs md-dynamic-height md-selected="msWizard.selectedIndex" md-center-tabs="true"> 
       <md-tab> 
        <md-tab-label> 
         <span>Product</span> 
        </md-tab-label> 

        <md-tab-body> 
<table class="dataTable row-border hover" datatable="ng" dt-instance="vm.dtInstance" 
        dt-options="vm.dtOptions"> 
       <thead> 
        <tr> 
         <th class="secondary-text"> 
          <div class="table-header"> 
           <span class="column-title">ID</span> 
          </div> 
         </th> 
         <th class="secondary-text"> 
          <div class="table-header"> 
           <span class="column-title">Image</span> 
          </div> 
         </th> 
         <th class="secondary-text"> 
          <div class="table-header"> 
           <span class="column-title">Name</span> 
          </div> 
         </th> 
         <th class="secondary-text"> 
          <div class="table-header"> 
           <span class="column-title">Category</span> 
          </div> 
         </th> 
         <th class="secondary-text"> 
          <div class="table-header"> 
           <span class="column-title">Price</span> 
          </div> 
         </th> 
         <th class="secondary-text"> 
          <div class="table-header"> 
           <span class="column-title">Quantity</span> 
          </div> 
         </th> 
         <th class="secondary-text"> 
          <div class="table-header"> 
           <span class="column-title">Active</span> 
          </div> 
         </th> 
         <th class="secondary-text"> 
          <div class="table-header"> 
           <span class="column-title">Actions</span> 
          </div> 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="product in ::vm.products"> 
         <td>{{product.id}}</td> 
         <td><img class="product-image" ng-src="{{product.image}}"></td> 
         <td>{{product.name}}</td> 
         <td>{{product.category}}</td> 
         <td>{{product.price}}</td> 
         <td>{{product.quantity}}</td> 
         <td>{{product.active}}</td> 
         <td> 
          <md-button class="edit-button md-icon-button" ng-click="vm.gotoProductDetail(product.id)" aria-label="Product details" 
             translate translate-attr-aria-label="EC.PRODUCT_DETAILS"> 
           <md-icon md-font-icon="icon-pencil" class="s16"></md-icon> 
          </md-button> 
         </td> 
        </tr> 
       </tbody> 
      </table> 

，這裏是我的js函數

vm.dtOptions = { 
     dom   : 'rt<"bottom"<"left"<"length"l>><"right"<"info"i><"pagination"p>>>', 
     columnDefs : [ 
      { 

       targets: 0, 
       width : '10px' 
      }, 
      { 

       targets: 1, 
       width : '20px' 
      }, 
      { 

       targets: 2, 
       width : '72px' 
      }, 
      { 

       targets: 3, 
       width : '72px' 
      }, 
      { 

       targets: 4, 
       width : '72px' 
      }, 
      { 

       targets: 5, 
       width : '72px' 
      }, 
      { 

       targets: 6, 
       width : '72px' 
      }, 
      { 

       targets: 7, 
       width : '72px' 
      }, 
      { 

       targets: 8, 
       width : '72px' 
      }, 

     ], 
     pagingType: 'simple', 
     autoWidth : false, 
     pageLength : 20, 
     scrollY : 'auto', //This line makes a problem 
     responsive : true, 


    }; 

當我使用它以外的MD-標籤此代碼工作正常，我。 我該如何解決這個問題。誰能幫我？ 順便說一下，我已經在示例中包含「datatables」和「datatables.scroller」。

Answer 1

最後，我有解決方案。解決方案非常簡單。正如我所提到的，表格在html代碼中正確顯示了數據，但它沒有出現在頁面中，所以我只是將height屬性設置爲如下所示。

<div style="height: 700px;" layout="column" flex> 
    <table class="dataTable row-border hover" datatable="ng" dt-instance="vm.dtInstance" dt-options="vm.dtOptions"> 
...