md-tabの角度データテーブルのScroller関数

Question

私は何時間も探してきましたが、役に立つ有用な答えはありませんでした。この問題を解決するのを手伝ってください。

問題：角度データセットをmd-tab（角材料）に挿入しました。 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関数は、私がMD-タブの外にそれを使用する場合、このコードは私のために正常に動作

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, 


    }; 

です。 この問題を解決する方法を教えてください。誰でも助けてくれますか？ ところで、私はすでに "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"> 
...