ngTable不會重新加載數據

Question

我是一名經驗豐富的C＃和MVC程序員，但剛開始使用AngularJS。我一直在使用ngTable（無論如何），但有限的成功，但我無法解決的一個問題 - 無論我做什麼，我都無法在數據發生更改時得到一個特定的表來刷新。

我通過工廠從Web API獲取數據 - 這是與特定產品關聯的供應商列表。第一次加載屏幕時，數據被帶回並且表格顯示正常 - 任何後續調用，數據都會返回，但表格未更新。按預期更新頁面的其他區域。

我已經做了一些控制檯日誌記錄，可以看到數據回來了。我嘗試了tableParams.reload()函數，並設置了tableParams.total()，但似乎沒有任何東西觸發表刷新。

這是我在控制器功能：

function getStockSupplier() { 
     console.log("getStockSupplier()"); 
     $scope.stockSupplierTableParams = {}; 

     stockSupplier.getAll({ url: "localhost:52457", sku: $scope.model.sku }) 
      .$promise.then(function (response) { 
       $scope.stockSupplier = response; 

       $scope.stockSupplierTableParams = new NgTableParams({ 
       }, { 
        dataset: response 
       }); 

       console.log("Got result"); 
       console.log("Length: " + $scope.stockSupplierTableParams.settings().dataset.length); 

       $scope.stockSupplierTableParams.reload(); 

      }, function (response) { 
       alert('no stock item'); 
       $scope.stockSupplier = null; 
      }); 
    } 

，這是我的HTML代碼：

<div ng-controller="stockController"> 
     <div> 
      <table ng-table="stockSupplierTableParams" class="table table-condensed table-bordered table-striped"> 
       <tr ng-repeat="issue in $data"> 
        <td data-title="'Supplier1'"> 
         {{issue.SupplierName}} 
        </td> 
        <td data-title="'On Order'"> 
         {{issue.OnOrder}} 
        </td> 
       </tr> 

      </table> 
     </div> 
    </div> 

我在一個完全喪失 - 這可能是我丟失的東西根本，但它讓我瘋狂，所以任何幫助都非常感謝。

編輯：這是Web API服務調用的代碼，以防有任何相關性。另外，我應該指出，上面的HTML用在指令中，如果這有什麼區別的話。

var myService = angular.module('myService', ['ngResource']); 
myService.factory('stockSupplier', [ 
    '$resource', 
    function ($resource) { 
     return $resource('http://:url/api/StockInfo?Sku=:sku&StockSupplier=true', 
      { 
       url: '@url', 
       sku: '@sku' 
      }, 
      { 
       getAll: { 
        method: 'GET', 
        isArray: true 
       }, 
      }); 
    } 
]); 

Answer 1

我明白了！雖然我不是100％確定如何，所以如果有經驗的Angular開發人員可以解釋它，我將不勝感激。它有兩個部分。

基本上 - 不是將數據集設置爲API調用的響應對象，而是將其設置爲變量$scope.stockSuppler。更新在此之前，我明確地空這個變量 - 下面的代碼：

function getStockSupplier() { 
     console.log("getStockSupplier()"); 
     $scope.tableIsReady = false; 
     $scope.stockSupplierTableParams = {}; 
     $scope.stockSupplier = []; 

     stockSupplier.getAll({ url: "localhost:52457", sku: $scope.model.sku }) 
      .$promise.then(function (response) { 
       $scope.stockSupplier = response; 

       $scope.stockSupplierTableParams = new NgTableParams({ 
       }, { 
        dataset: $scope.stockSupplier 
       }); 

       console.log("Got result"); 
       console.log("Length: " + $scope.stockSupplierTableParams.settings().dataset.length); 
       $scope.stockSupplierTableParams.reload(); 
       $scope.tableIsReady = true; 
      }, function (response) { 
       alert('no stock item'); 
       $scope.stockSupplier = null; 
      }); 
    } 

另外，我從指示HTML代碼刪除ngController="stockController" - 該指令被稱爲在已定義的控制器覈實。控制器定義兩次似乎也令人困惑。我應該強調，只有做出這些改變，我才能工作。其中一個或另一個，它仍然無法正常工作。

該表現在正按預期更新頁面上的其他部分。

我不知道爲什麼使用範圍變量而不是來自API的響應有所作爲，但它已經成功了。

Answer 2

我有一個簡單的解決方案，你可以在加載數據時重新繪製表：

HTML

<div ng-controller="stockController"> 
    <div data-ng-if="tableIsReady"> 
     <table ng-table="stockSupplierTableParams" class="table table-condensed table-bordered table-striped"> 
      <tr ng-repeat="issue in $data"> 
       <td data-title="'Supplier1'"> 
        {{issue.SupplierName}} 
       </td> 
       <td data-title="'On Order'"> 
        {{issue.OnOrder}} 
       </td> 
      </tr> 

     </table> 
    </div> 
    <div data-ng-if="!tableIsReady"> 
     // you can put loader here 
    </div> 
</div> 

JS

function getStockSupplier() { 
    console.log("getStockSupplier()"); 
    $scope.stockSupplierTableParams = {}; 

    $scope.tableIsReady = false; // here we hide table, and show loader 

    stockSupplier.getAll({ url: "localhost:52457", sku: $scope.model.sku }) 
     .$promise.then(function (response) { 
      $scope.stockSupplier = response; 

      $scope.stockSupplierTableParams = new NgTableParams({ 
      }, { 
       dataset: response 
      }); 

      console.log("Got result"); 
      console.log("Length: " + $scope.stockSupplierTableParams.settings().dataset.length); 

      $scope.stockSupplierTableParams.reload(); 

      $scope.tableIsReady = true; // here we show table again 

      $scope.$apply() // start digest 

     }, function (response) { 
      alert('no stock item'); 
      $scope.stockSupplier = null; 
     }); 
} 

否則，你的代碼是好的，你只是可能忘記把$scope.$apply()後$scope.stockSupplierTableParams.reload();