Javascript angularjs ng表格类型错误：无法读取属性'；排序'；未定义的_Javascript_Angularjs_Ngtable

Javascript angularjs ng表格类型错误：无法读取属性'；排序'；未定义的

javascript angularjs

Javascript angularjs ng表格类型错误：无法读取属性'；排序'；未定义的,javascript,angularjs,ngtable,Javascript,Angularjs,Ngtable,我是web开发新手，我很难将ng table与angularjs结合使用。我的控制器如下所示： var diary = angular.module('diary', ['ngTable']) .controller('mainController',['$scope', '$http', 'NgTableParams', function($scope,$http, NgTableParams){ $scope.formData = {};

我是web开发新手，我很难将ng table与angularjs结合使用。我的控制器如下所示：

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 -->
<!doctype html>

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="diary">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

    <title>Mountain Diary</title>

    <!-- SCROLLS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><!-- load bootstrap -->
    <style>
        html                    { overflow-y:scroll; }
        body                    { padding-top:50px; }
        #course-list              { margin-bottom:30px; }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script><!-- load angular -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.css">
    <script src="core.js"></script>

</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
<div class="container">
    <!-- HEADER AND TODO COUNT -->
    <div class="jumbotron text-center">
        <h1>Mountain Diary - courses: <span class="label label-info">{{ courses.length }}</span></h1>
    </div>
    <table ng-table="tableParams" class="table-striped" show-filter="true">
        <tr ng-repeat="course in data">
            <td data-title="'id'" sortable="'id'">{{course.id}}</td>
            <td  data-title="'date'" sortable="'date'">{{course.date | date}}</td>
            <td  data-title="'courseType'" sortable="'course.courseType'" filter="{'course.courseType': 'text'}">{{course.courseType | uppercase }} </td>
            <td  data-title="'place'">{{course.place}}</td>
            <td  data-title="'partners'">{{course.partners}}</td>
            <td  data-title="'description'">{{course.description}}</td>
            <td  data-title="'descriptionDetail'">{{course.descriptionDetail}}</td>
            <td  data-title="'descriptionUrl'">{{course.descriptionUrl}}</td>
            <td  data-title="'photoUrl'">{{course.photoUrl}}</td>
        </tr>
    </table>
</div>
</body>
</html>


山地日记
html{overflow-y:scroll；}
正文{padding top:50px；}
#课程列表{页边距底部：30px；}
山地日记-课程：{{courses.length}
{{course.id}
{{course.date | date}}
{{course.courseType |大写}}
{{course.place}
{{course.partners}}
{{course.description}}
{{course.descriptionDetail}
{{course.descriptionUrl}}
{{course.photoUrl}

打开index.html时出现错误：无法读取未定义的属性“排序”

这意味着调用getData函数时，参数为空

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

但我该如何解决这个问题呢？谢谢大家!

将

$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);
        }
    );
}

Teen，在

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

供参考：

请阅读以下内容：

$http

旧版承诺方法

success

和

error

已被弃用。请改用标准

然后方法。如果设置为false
，则这些方法将抛出$http/legacy
错误
这就是为什么我将$scope.getCourses
函数中的$http
更改为，然后
，而不是使用成功
和错误
回调。
自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;
                }

谢谢，我做了建议的更新，但不幸的是，我仍然得到相同的错误，params仍然是未定义的。首先，他们说你应该像这样重复数据
。当你控制台.log（params）时，你看到了什么
在getData
函数中？@user1820620我添加了一些更改，你能试试吗？（别忘了将视图更改为
我做了所有更改，但getData函数中仍然没有定义参数