ngTable 不会重新加载数据

Question

我是一位经验丰富的 C# 和 MVC 程序员，但才刚开始 AngularJS。我一直在使用 ngTable（无论如何都在尝试），但收效甚微，但有一个问题我无法解决——无论我做什么，当数据发生变化时，我无法获得特定的 table 来刷新。

我正在通过工厂从 Web API 获取数据 - 它是与特定产品关联的供应商列表。第一次加载屏幕时，数据被带回并且 table 显示正常 - 任何后续调用，数据被返回，但 table 没有更新。页面的其他区域正在按预期更新。

我已经完成了一些控制台日志记录，可以看到数据正在返回。我尝试了 tableParams.reload() 功能，并设置了 tableParams.total() 但似乎没有任何东西可以触发 table 刷新。

这是我在控制器中的功能：

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

我有一个简单的解决方案，你可以在加载数据时重新渲染table：

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.stockSupplierTableParams.reload();

之后加上 $scope.$apply()

Answer 2

我成功了！虽然我不是 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" - 该指令在已经定义了控制器的 div 中调用。两次定义控制器似乎也使它感到困惑。我要强调的是，只有进行这两项更改，我才能开始工作。一个或另一个，它仍然无法正常工作。

table 现在正在按预期更新页面上的其他部分。

我不确定为什么使用范围变量而不是 API 的响应会有所不同，但它已经成功了。

ngTable 不会重新加载数据

ngTable Will Not Reload Data

asp.net

angularjs

ngtable