Question

我是一位经验丰富的C＃和MVC程序员，但刚开始使用AngularJS。我一直在使用ngTable（无论如何都试图）但成功有限，但是我无法解决的一个问题 - 无论我做什么，我都无法在数据发生变化时刷新特定的表。

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

我做了一些控制台日志记录，可以看到数据又回来了。我已经尝试了tableParams.reload()功能，并设置了tableParams.total()，但似乎没有任何内容可以触发表格刷新。

这是我在Controller中的功能：

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

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

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();

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中调用。将控制器定义两次似乎也使其混淆。我应该强调，只有做出这两个变化，我才能开始工作。只有一个或另一个，它仍然无法正常工作。

该表现在正如预期的那样与页面上的其他部分一起更新。

我不确定为什么使用范围变量而不是来自API的响应会产生影响，但它已经成功了。

ngTable无法重新加载数据

2 个答案: