javascript - ngTable 未加载数据

Question

我的屏幕上有两个表格:

(1)

<table id="users" class="widget" ng-table="usersTableParams">
                    <tr ng-repeat = "user in $data" ng-click="usersClicked($event, user.userId);">
                        <td >{{user.userId}}</td>
                        <td >{{user.roleName}}</td>
                    </tr>
                </table>

(2)

<table class="widget" ng-table="sitesTableParams">
                    <tr ng-repeat = "site in $data">
                        <td >{{site.site}}</td>
                        <td >{{site.country}}</td>
                        <td >{{site.region}}</td>
                        <td >{{site.selected == true ? "Yes" : "No"}}</td>
                        <td >
                            <input type="checkbox" ng-checked="{{site.selected}}" ng-model="site.selected"></input>
                        </td>
                    </tr>
                </table>

我在两个表中加载数据的脚本:

$scope.users =[];
$scope.sitesAssigned =[];   

$scope.selectedUsers = {
            users: []
        };


$scope.usersTableParams = new ngTableParams({
            page: startPage,
            count: rowsPerPage,
            sorting: {
                userId: 'asc'
            },
            filter: {
                userId: '',
                roleName:''
            }
        },
        {
            total: $scope.users.length,
            getData: function($defer, params){
                var orderedData = getFilteredSortedData($scope.users, params);
                params.total(orderedData.length);
                var slicedData = getSlicedData(orderedData,params);
                if(null != slicedData && slicedData.length > 0){
                    var user = slicedData[0];
                    if(user.hasOwnProperty('userId')){
                        $scope.selectedUsers.users.push(user.userId);
                        console.log('Selected User: '+JSON.stringify($scope.selectedUsers));
                    }
                }
                $defer.resolve(slicedData);
            }
        });


        $scope.sitesTableParams = new ngTableParams({
            page: startPage,
            count: rowsPerPage,
            sorting: {
                site: 'asc'
            },
            filter:{
                site: '',
                country: '',
                region: ''
            }
        },
        {
            total: $scope.sitesAssigned.length,
            getData: function($defer, params){
                var orderedData = getFilteredSortedData($scope.sitesAssigned, params);
                params.total(orderedData.length);
                var slicedData = getSlicedData(orderedData, params);
                $defer.resolve(slicedData);
            }
        }); 
$scope.$watch('sitesTableParams', function(newValue, oldValue){
            console.log('Old value of sitesTableParams: '+JSON.stringify(oldValue));
            console.log('New value of sitesTableParams: '+JSON.stringify(newValue));
        }, true);

            $scope.$watch('selectedUsers', function(newValue, oldValue){
            console.log('Old value of selected users: '+JSON.stringify(oldValue));
            console.log('New value of selected users: '+JSON.stringify(newValue));
            var users = $scope.selectedUsers.users[0];
            console.log('Fetch sites assigned to user: '+users);
            console.log('Sites table params before fetching sites data: '+JSON.stringify($scope.sitesTableParams));
            mlmSiteAssignments.getSites(users).then(function(data){ 
                console.log('List of sites received from service: '+JSON.stringify(data));
                angular.forEach(data, function(site ){
                    $scope.sitesAssigned.push({
                        site: site.site,
                        country: site.country,
                        region: site.region,
                        selected: site.selected
                    });
                });
                $scope.sitesTableParams.data = $scope.sitesAssigned;
                $scope.siteAssignmentsTableParams.reload();
                console.log('Sites table params after fetching sites data: '+JSON.stringify($scope.sitesTableParams));
            });

        }, true);



        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;
            }
            return data;
        };

        var getSlicedData = function(data, params) {
             var slicedData = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
             return slicedData;
        };

单击“usersTableParams”中的一行时，应加载“sitesTableParams”中的数据。单击“usersTableParams”中的一行，我正在获取第二个表的数据，但如此获取的数据未在页面中呈现。

我在这个问题上卡了好几天了，一直找不到解决办法。欢迎任何建议/更正/指点。

当运行上面的代码时，控制台显示:

Old value of sitesTableParams: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
New value of sitesTableParams: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
Old value of selected users: {"users":[]}
New value of selected users: {"users":[]}
Fetch sites assigned to user: undefined
Sites table params before fetching sites data: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
List of sites received from service: []
Sites table params after fetching sites data: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
Selected User: {"users":["abc.COM"]}
Old value of selected users: {"users":[]}
New value of selected users: {"users":["abc.COM"]}
Fetch sites assigned to user: abc.COM
Sites table params before fetching sites data: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}
List of sites received from service: [DATA ARRAY]
Sites table params after fetching sites data: {"data":[],"$params":{"page":1,"count":10,"filter":{"site":"","country":"","region":""},"sorting":{"site":"asc"},"group":{},"groupBy":null},"filterBuffer":{}}

所以日志表明，即使我在用于填充数据的变量中获取了数据，也不会调用站点表的观察程序。这意味着数据未提供给站点表参数。任何解释为什么会发生这种情况。

Answer 1

ng-table 的getData 函数在加载 Controller 时被调用。您正在独立于“getData”函数进行异步调用，因此无法保证在调用 getData 函数时已检索到数据。

ng-table 在 ngTableParams 对象上提供了一个方法来重新加载数据(即它会再次为您调用 getData)。示例:

*ngTableParams*.reload();

在 loadUserSites 中，您应该像这样调用此方法来更新表数据:

mlmSiteAssignments.getSites(users).then(function(data){                 
    angular.forEach(data, function(site){
        $scope.sitesAssigned.push({
            site: site.site,
            country: site.country,
            region: site.region,
            selected: site.selected
        });
    });
    $scope.siteAssignmentsTableParams.reload();
});

然后，这将调用 getData，这将为您的 View 解析已排序/分页的 $data。