Question

我是网络开发的新手，我在使用ng-table和angularjs时很困难。我的控制器如下：

System.Net.ServicePointManager.ServerCertificateValidationCallback +=
(sender, cert, chain, sslPolicyErrors) =>
{
    if (cert != null) System.Diagnostics.Debug.WriteLine(cert);
    return true;
};

观点是这样的：

var diary = angular.module('diary', ['ngTable'])
.controller('mainController',['$scope', '$http', 'NgTableParams',
        function($scope,$http, NgTableParams){
            $scope.formData = {};
            $scope.courses = [];
            $scope.data = [];

            $scope.getCourses = function(){
                $http.get('/api/courses')
                    .success(function(data) {

                        $scope.courses = data;
                        console.log("data in getCourses " + data);

                    })
                    .error(function(data) {
                        console.log('Error: ' + data);
                    });
            }

            $scope.tableParams = new NgTableParams({
                page: 1,
                count: 150
            }, {
                getData: function ($defer, params) {
                    console.log('params '+ params)
                    // when landing on the page, get all todos and show them
                    $scope.getCourses();

                        $scope.data = params.sorting() ? $filter('orderBy')($scope.courses, params.orderBy()) : $scope.courses;
                        $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
                        $scope.data = $scope.data.slice(0, 20);
                        $defer.resolve($scope.data);
                }
            });
        }
        ]
    );

当我打开index.html时，我收到错误：无法读取undefined的属性'sorting'。

这意味着当调用getData函数时，params为空。

在我看来，当调用getData函数时，$ scope.getCourses成功函数尚未终止（异步），因此数据尚未就绪。

但我该如何解决这个问题呢？谢谢！

Answer 1

将$scope.getCourses更改为：

$scope.getCourses = function(){
    // This function return the `$thhp` promise that resolves with the data returned from the server
    return $http.get('/api/courses').then(
        function(response) {
            // You can also manipulate the data before resolving it here
            return response.data;
        },
        function(data) {
            console.log('Error: ' + data);
        }
    );
}

青少年，在getData: function ($defer, params) {内部调用上述函数：

$scope.getCourses().then(
    function(data) {
        var courses = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
         courses = params.filter() ? $filter('filter')(courses, params.filter()) : courses;
        courses = courses.slice(0, 20);
        $defer.resolve(courses);
    }
)

供参考：

阅读此Deprecation Notice：

已弃用$http遗留承诺方法success和error。请改用标准then方法。如果$httpProvider.useLegacyPromiseExtensions设置为false，则这些方法会抛出$http/legacy错误。

这就是我将$http函数中的$scope.getCourses更改为then而不是使用success和error回调的原因。

Answer 2

自NgTable 1.0.0版以来，getData的格式已经改变。你的getData函数应如下所示：

                getData: function (params) {
                    console.log('params '+ params)
                    // when landing on the page, get all todos and show them
                    $scope.getCourses();

                        $scope.data = params.sorting() ? $filter('orderBy')($scope.courses, params.orderBy()) : $scope.courses;
                        $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
                        $scope.data = $scope.data.slice(0, 20);
                        return $scope.data;
                }

angularjs ng-table TypeError：无法读取undefined的属性'sorting'

2 个答案: