【问题标题】:ngTable: Cannot read property "page"?ngTable:无法读取属性“页面”?
【发布时间】:2016-08-10 02:32:12
【问题描述】:

我正在尝试实现 ngTable 以显示来自休息调用的 json。在我的工厂js中,我定义了http get请求获取本例所有记录的方法。

ristoreApp.factory("fmFactory", ['$http', '$window',
    function ($http, $window) {
        var service = {};

        service.getAll = function () {
            var url = SERVER + "/ristore/foundation/";
            return $http({
                headers: {'Authorization': 'Bearer ' + $window.localStorage.getItem("access_token")},
                url: url,
                method: 'GET',
                crossOrigin: true
            })
        }

        return service;
    }]);

ngTable 在我的控制器 js 中设置

ristoreApp.controller("fmCtrl",
    ['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) {
        $scope.selection = '0';
        $scope.reports = [];
        $scope.fmSearch = function () {
            if ($scope.selection == '0') {
                fmFactory.getAll().success(function (data) {
                    $scope.reports = data;
                    $scope.tableParams = new NgTableParams({
                        page: 1,            // show first page
                        count: 10          // count per page
                    }, {
                        total: $scope.reports.length, // length of data
                        getData: function ($defer, params) {
                            $defer.resolve($scope.reports.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                        }
                    });
                })
            }
        }
    }]
)

没什么特别的,只是简单的分页,每页 10 条记录。但是,$defer.resolve() 中的方法 params.page() 出现错误 TypeError: Cannot read property 'page' of undefined。这很奇怪。显然“页面”是在NgTableParams 的参数部分中定义的。为什么它抱怨它没有定义?

编辑:

根据 Sergii 的回答中的 link,我删除了 $defer 并将我的控制器 js 更改为以下内容:

ristoreApp.controller("fmCtrl",
    ['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) {
        $scope.selection = '0';
        $scope.reports = [];
        $scope.fmSearch = function () {
            if ($scope.selection == '0') {
                    $scope.tableParams = new NgTableParams({
                        page: 1,            // show first page
                        count: 10          // count per page
                    }, {
                        getData: function (params) {
                            return fmFactory.getAll().then(function(data) {
                                params.total(data.inlineCount);
                                return data;
                            });
                        }
                    });
            }
        }
    }]
)

然而,除了一堆行,什么都没有显示。 http 调用 url 已经过测试,并使用 rest api 测试器返回正确的承诺。

【问题讨论】:

  • 这种方式已弃用getData: function ($defer, params) - 它只是为了向后兼容,直接返回数据/承诺......
  • 你可以删除 $defer 并只接收参数,看看是否能解决问题...另一个问题是确保你正确注入 NgTableParams 并检查它是否未定义
  • 我也有类似的问题。我还想添加一个重要的细节。我的错误是相同的,但在调试模式下我看到 params is undefined 并且无法从未定义的参数页面获取。 @ddd 如果您比我更快地找到解决方案,请在此处添加答案。
  • 问题结束了吗?你还有问题吗?是相同的问题还是不同的问题?

标签: javascript angularjs pagination ngtable


【解决方案1】:

正如我在评论中写的 params 未定义,但异常被 angular 包装\处理,这是部分正确异常信息的原因。

我认为出现此问题是因为您目前使用的是最新的 ng-table-1.0.0 库。如果您导航到Angular ngTableDynamic example:server-side listAngular ngTable example:server-side list,请注意加载数据的 API 已更改。

  getData: function(params) {
    // ajax request to api
    return yourFactory.get(params.url()).$promise.then(function(data) {
      params.total(data.inlineCount);
      return data.results;
    });
  }

在您的参数 $defer 中还有不同的对象(对象是 params)。如果您尝试应用提供的解决方案,请确保您更改了正确的参数:

params.url() - should be pagination filter like {page: 0, size: 10}
data.inlineCount - total elements on server side
data.results - data list from server side

我希望我的调查不仅能帮助我解决这个问题。

【讨论】:

  • 所以我不应该在fmFactory.getAll().success(function (data) 中包含getData,而是应该将fmFactory.getAll 放在getData 中?我没有使用 $resource 并且 $http 包含在我工厂的 getAll() 方法中(请参阅我帖子中的工厂源代码)。因此工厂没有get()
  • 在示例 Api.get(params.url()) 中,这个 url 是什么?它是在哪里定义的?
  • params.url() 返回 {page: 1, size: 10} 可以在调试模式下查看。
  • 在您的代码部分中使用了 getData: function ($defer, params)。但应该是 getData: function (params) (对于 ngTable 版本从 1.0.0 开始)
  • 你有一些例外吗?您现在编辑的部分更好,但它也可能有其他问题。要解决您需要在调试模式下检查模型状态的问题。如果您需要更多建议,请分享有关当前状态的更多详细信息。
猜你喜欢
  • 2021-06-13
  • 1970-01-01
  • 1970-01-01
  • 2022-01-21
  • 2022-12-16
  • 2020-08-23
  • 1970-01-01
  • 2020-11-29
  • 2017-10-23
相关资源
最近更新 更多