堆棧內存溢出
  簡體   English   中英

ng-table v1.0.0：TypeError：無法讀取未定義的屬性“頁面”

[英]ng-table v1.0.0: TypeError: Cannot read property 'page' of undefined

 原文  2016-08-15 20:34:55  2   1    javascript/ angularjs/ ngtable

問題描述

我試圖從示例中使用angularjs ng表：http: //4dev.tech/2015/08/tutorial-basic-datatable-sorting-filtering-and-pagination-with-angularjs-and-ng-table/ 

  angular.module('ngTableTutorial', ['ngTable']) .controller('tableController', function ($scope, $filter, NgTableParams) { $scope.users = [{"id":1,"first_name":"Philip","last_name":"Kim","email":"pkim0@mediafire.com","country":"Indonesia","ip_address":"29.107.35.8"}, {"id":2,"first_name":"Judith","last_name":"Austin","email":"jaustin1@mapquest.com","country":"China","ip_address":"173.65.94.30"}, {"id":3,"first_name":"Julie","last_name":"Wells","email":"jwells2@illinois.edu","country":"Finland","ip_address":"9.100.80.145"}, {"id":4,"first_name":"Gloria","last_name":"Greene","email":"ggreene3@blogs.com","country":"Indonesia","ip_address":"69.115.85.157"}, {"id":50,"first_name":"Andrea","last_name":"Greene","email":"agreene4@fda.gov","country":"Russia","ip_address":"128.72.13.52"}]; $scope.usersTable = new NgTableParams({ page: 1, count: 10 }, { total: $scope.users.length, getData: function ($defer, params) { $scope.data = $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count()); $defer.resolve($scope.data); } }); }); 
 <!DOCTYPE html> <html ng-app="ngTableTutorial"> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css"> <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script> <!-- <link href="app/resources/css/style.css" rel="stylesheet" type="text/css"/> <script src="app/resources/js/app.js" type="text/javascript"></script>--> </head> <body> <div ng-controller="tableController"> <table ng-table="usersTable" class="table table-striped"> <tr ng-repeat="user in data"> <td data-title="'Id'" > {{user.id}} </td> <td data-title="'First Name'" > {{user.first_name}} </td> <td data-title="'Last Name'" > {{user.last_name}} </td> <td data-title="'e-mail'" > {{user.email}} </td> <td data-title="'Country'"> {{user.country}} </td> <td data-title="'IP'" > {{user.ip_address}} </td> </tr> </table> </div> </body> </html>

並獲取異常：TypeError：無法讀取未定義的屬性“頁面”

我認為是因為ng-table轉到了新版本1.0.0。 現在，此示例不起作用。 而且我不知道如何重寫示例，以便它與新版本ng-table一起使用 ？

請幫幫我。

UPD：或者您是否可以發布帶有ng-table 1.0.0，getdata，分頁和過濾的獨立示例？

UPD：如果從getData參數中刪除$ defer，則沒有幫助。 這不是拋出異常，但不顯示數據。 片段顯示問題：

UPD 2016.08.16 1:15我添加了$ scope.data = $ scope.users.slice（（params.page（）-1）* params.count（），params.page（）* params.count（））行;

現在顯示數據，但不過濾。 如何重寫代碼段以過濾數據？

UPD 2016.08.16 1:36：添加字符串 

counts: [2, 4, 6, 10, 20],

和 

<tr ng-repeat="user in $data track by user.id">

現在分頁和過濾很好。 

  angular.module('ngTableTutorial', ['ngTable']) .controller('tableController', function($scope, $filter, NgTableParams) { $scope.users = [ { "id": 1, "first_name": "Philip", "last_name": "Kim", "email": "pkim0@mediafire.com", "country": "Indonesia", "ip_address": "29.107.35.8" }, { "id": 2, "first_name": "Judith", "last_name": "Austin", "email": "jaustin1@mapquest.com", "country": "China", "ip_address": "173.65.94.30" }, { "id": 3, "first_name": "Julie", "last_name": "Wells", "email": "jwells2@illinois.edu", "country": "Finland", "ip_address": "9.100.80.145" }, { "id": 4, "first_name": "Gloria", "last_name": "Greene", "email": "ggreene3@blogs.com", "country": "Indonesia", "ip_address": "69.115.85.157" }, { "id": 50, "first_name": "Andrea", "last_name": "Greene", "email": "agreene4@fda.gov", "country": "Russia", "ip_address": "128.72.13.52" } ]; $scope.usersTable = new NgTableParams({ page: 1, count: 2 }, { total: $scope.users.length, counts: [2, 4, 6, 10, 20], getData: function( params) { params.total($scope.users.length); $scope.data = $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count()); return $scope.data; } }); }) 
 <html ng-app="ngTableTutorial"> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css"> <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script> </head> <body> <div ng-controller="tableController"> <table ng-table="usersTable" class="table table-striped"> <tr ng-repeat="user in $data track by user.id"> <td data-title="'Id'" > {{user.id}} </td> <td data-title="'First Name'" > {{user.first_name}} </td> <td data-title="'Last Name'" > {{user.last_name}} </td> <td data-title="'e-mail'" > {{user.email}} </td> <td data-title="'Country'"> {{user.country}} </td> <td data-title="'IP'" > {{user.ip_address}} </td> </tr> </table> </div> </body> </html>

1 個解決方案

解決方案1
 3 已采納  2016-08-15 21:36:16

從0.8.x到1.0.0版本有一些重大更改，這些更改記錄在github存儲庫的CHANGELOG文件中： https ： //github.com/esvit/ng-table/blob/master/CHANGELOG.md#重大變化

正如@ just.ru已經指出的那樣，您的問題可能是由getData簽名的更改引起的。 在早期版本中，第一個參數是$defer ，這是從$q服務中$defer一些deferred對象。 這允許進行異步調用並發出新數據到達的信號。 通過1.0.0，API發生了變化，您現在可以直接返回數據或為數據返回保證。 ng-table然后為您處理所有事情。

因此，如果您的數據已經可用，並且您不想使用服務器端過濾和排序，則可以使用新的dataset屬性，如下所示： 

$scope.users = [ /* your data... */ ];

假定。 

$scope.usersTable = new NgTableParams({
    // your config
  }, {
    dataset: $scope.users;
  }
);

或者，您可以通過相應地實現getData方法來自行處理過濾： 

$scope.usersTable = new NgTableParams({
    // your config
  }, {
    getData: function(params) {
      params.total($scope.users.length);
      return $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count());
    }
  }
);

如果您的服務器支持過濾和分頁，則必須根據響應設置一些屬性。 響應中必須包含有關查詢匹配的元素總數的信息。

假設您的JSON響應如下所示： 

{
   totalAmountOfMatchingItems: 33,
   itemsOfTheCurrentPage: [
     { /*... */ }
   ]
}

您可能需要相應地實現getData ： 

$scope.usersTable = new NgTableParams({
    // your config
  }, {
    getData: function(params) {
      return $scope.backendApi.queryForResult(params).then(function(data) {
        params.total(data.totalAmountOfMatchingItems);
        return data.itemsOfTheCurrentPage;
      });
    }
  }
);

調用params.total()方法很重要，以便ng-table知道它必須如何呈現分頁。

更新：使用getData版本時，還需要確保在迭代時為過濾的項目引用正確的值。 之前，您$scope.data過濾后的項目分配給$scope.data 。 ng-table現在也使用$data屬性來處理。 因此，要修復您的代碼段，您還需要相應地調整ng-repeat ： 

 <tr ng-repeat="user in $data track by user.id">

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 ng-table&gt; TypeError：無法讀取未定義的屬性“排序” angularjs ng-table TypeError：無法讀取未定義的屬性“排序” ng-table TypeError：無法設置null的屬性&#39;$ data&#39; 類型錯誤：無法讀取未定義的屬性“v4” TypeError：無法讀取反應中未定義的屬性“頁面” 類型錯誤：無法讀取未定義的屬性“頁面” 如何在頁面中使用React Router v1.0.0進行鏈接 TypeError：使用ng-submit時無法讀取未定義的屬性&#39;$ valid&#39; TypeError：無法讀取ng-repeat的undefined屬性 Angular 6 ng build無法讀取未定義的Type的屬性“ length”：無法讀取levenshtein的未定義的屬性“ length”
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM