AngularJS：$defer.resolve() 没有将数据绑定到 table

Question

下面是我的 HTML 代码，用于在 table.

中加载数据

<table id="users" class="dashboard-widget msbf-table" ng-table="usersTableParams" hide-pagination="false" show-filter="true">
                    <tr ng-repeat = "user in users" ng-click="usersClicked($event, user.userId);">
                        <td data-title="'User login'" sortable="'userLogin'" filter="{'userId' : 'text'}">{{user.userId}}</td>
                        <td data-title="'User role'" sortable="" filter="{'roleName' : 'text'}">{{user.roleName}}</td>
                    </tr>
                </table>

这是我在 table:

中填充数据的代码

$scope.usersTableParams = new ngTableParams({
            page: startPage,
            count: rowsPerPage,
            sorting: {
                userId: 'asc'
            },
            filter: {
                userId: '',
                roleName:''
            }
        },
        {
            total: $scope.users.length,
            getData: function($defer, params){
                 // use build-in angular filter
                var orderedData = getFilteredSortedData($scope.users, params);
                //var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
                //$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                params.total(orderedData.length); // set total for recalc pagination


                $defer.resolve(getSlicedData(orderedData,params));
            }
        });

var getFilteredSortedData = function(data, params) {
            if (params.filter()) {
                data = $filter('filter')(data, params.filter());
            }
            if (params) {
                data = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
            }
            console.log('Filtered Data: '+JSON.stringify(data));
            console.log('Filtered Data size: '+data.length);
            return data;
        };
        //slices the data for the current page, checked
        var getSlicedData = function(data, params) {
             var slicedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
             console.log('Sliced Data: '+JSON.stringify(slicedData));
             console.log('Sliced Data size: '+data.length);
             return slicedData;
        };

问题是数据正确地传给了变量 'slicedData'，但是，这并没有填充到 HTML table 中。我怀疑的是那一行：

$defer.resolve(getSlicedData(orderedData,params))'

无效。欢迎任何指点/想法。

感谢和问候尼尚特·库马尔

Answer 1

需要调用$apply，或者调用resolve后触发digest

将 getData 更改为：

getData: function($defer, $timeout, params){
     // use build-in angular filter
    var orderedData = getFilteredSortedData($scope.users, params);
    //var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
    //$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

    params.total(orderedData.length); // set total for recalc pagination


    $defer.resolve(getSlicedData(orderedData,params));
    if (!$scope.$$phase) {
        $scope.$digest();
    }
}

您也可以尝试将 $defer.resolve 包装在 $timeout 中，这会触发摘要 - 试试这个：

getData: function($defer, params){
     // use build-in angular filter
    var orderedData = getFilteredSortedData($scope.users, params);
    //var orderedData = params.filter() ? $filter('filter')($scope.users, params.filter()) : $scope.users;
    //$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

    params.total(orderedData.length); // set total for recalc pagination


    $timeout(function() {
        $defer.resolve(getSlicedData(orderedData,params));
    })
}

您需要这样做的原因是 angularJS 的观察者未获取同步代码。

Answer 2

我终于明白是哪里出了问题。

<table id="users" class="dashboard-widget msbf-table" ng-table="usersTableParams" hide-pagination="false" show-filter="true">
                <tr ng-repeat = "user in users" ng-click="usersClicked($event, user.userId);">
                    ....
                </tr>
            </table>

ng-repeat = "user in users"

应替换为

ng-repeat = "user in $data"

如果您正在使用

getData in ngTableParams

自定义显示的数据。

根据我的理解，发生这种情况是因为 getData() 函数将数据和所有其他详细信息放在 $data 中，而不是实际存储它的变量中。在为 table 声明参数时，此 $data 变量负责根据为 table 指定的配置呈现的数据。希望大家认同我的理解。由于我是 Angular JS 的新手，所以我可能根据错误的假设提供了解释，因此欢迎任何形式的更正，并感谢所有 StackFlow 追随者和贡献者在这里帮助我。

AngularJS：$defer.resolve() 没有将数据绑定到 table

AngularJS: $defer.resolve() not binding data to table

deferred

angularjs

ngtable