2014-10-29 116 views
5

我正在使用ui-grid和306_expandable_grid,我已经使用了准确的代码,因为在文档中,但我面临着一个错误的问题。306_expandable_grid - 无法读取'data'的属性undefined

app.js

$http.get('resources/data/title2.json') 
    .success(function(data){ 

     console.log(data); 
     console.log(data[0].Data); 
     console.log(data.length); 
     for(i = 0; i < data[i].length; i++){ 
      data[i].subGridOptions = { 
        columnDefs: [ 
        {name:"Title" }, 
        {name:"Jan-10" }, 
        {name:"Feb-10"}, 
        {name:"Mar-10" }, 
        {name:"Apr-10" }, 
        {name:"May-10" }, 
        {name:"Jun-10" }, 
        {name:"Jul-10" }, 
        {name:"Aug-10" }, 
        {name:"Sep-10" }, 
        {name:"Oct-10" }, 
        {name:"Nov-10" }, 
        {name:"Dec-10" } 
       ], 
       data: data[i].Data 
      } 
     } 
     // $scope.subGridOptions.data = data; 
     $scope.gridOptions.data = data; 
     // $scope.title = data[0].Title; 
    }); 

externalHtmlFile.html

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div> 

这是我坚持

TypeError: Cannot read property 'data' of undefined 
    at new <anonymous> (http://localhost/ng-Grid/resources/scripts/ui-grid-unstable.js:2883:41) 
    at Object.e [as invoke] (http://localhost/ng-Grid/resources/scripts/angular.min.js:36:456) 
    at E.instance (http://localhost/ng-Grid/resources/scripts/angular.min.js:75:118) 
    at http://localhost/ng-Grid/resources/scripts/angular.min.js:58:276 
    at r (http://localhost/ng-Grid/resources/scripts/angular.min.js:7:408) 
    at M (http://localhost/ng-Grid/resources/scripts/angular.min.js:58:260) 
    at http://localhost/ng-Grid/resources/scripts/angular.min.js:65:412 
    at http://localhost/ng-Grid/resources/scripts/angular.min.js:109:276 
    at h.$eval (http://localhost/ng-Grid/resources/scripts/angular.min.js:123:139) 
    at h.$digest (http://localhost/ng-Grid/resources/scripts/angular.min.js:120:220) 

的错误时,我加号图标点击,错误发生......我无法找到我能理解的解决方案。请帮忙

回答

10

首先,确保你初始化了$scope.gridOptions以外的$http.getsuccess回调。只在success回调内添加$scope.gridOptions.data[i].subGridOptions$scope.gridOptionsReference

您无法在成功调用中定义网格选项。您需要在控制器的作用域中定义它们,然后设置成功调用的数据或列定义等。

其次,确保网格/页面的控制器没有任何一种初始化参数相关的重定向。我面临由于下面的代码段我不得不在页面上的所产生的相同的错误消息:

if (typeof clientcode === 'string' && clientcode !== '') { 

    var payload = { 
     clientcode : storedClientcode 
    } 

} else { 

    $location.path('/'); 

} 

这里的想法是,以检查是否storedClientcode被调用页面提供(经由共享应用程序根服务)如果没有,则重定向到应用程序主页。但是ui-grid显然会在页面上对页面进行单独的子呼叫,而这些子呼叫当然不会提供我用我的代码查找的数据,因此重定向发生在这些呼叫的幕后。没有错误(除了你所看到的)被产生,没有数据显示在网格中。这花了我一些时间来弄清楚(我对AngularJS相当新,这是我的第一个ui-grid应用程序)。希望这可以帮助某人,即使它不能解决这个问题。

+0

是的,谢谢你的解释先生...即使我是新的angularJS。我知道出了什么问题,我正在写下来。 'columnDefs:[{name:'title',** field:'title'**},...];''中的'field'参数给我的问题在我的上下文中,我已经定义了grid选项的范围 '$ scope.gridOptions = { expandableRowTemplate:'externalhtmlfile.html', expandableRowHeight:300, aggregationHideLabel:false }'。 我花了一些时间来理解数据绑定到的“field”。 – 2014-11-01 02:42:10

+0

另请注意,'field'是'name'的别名,可用于向后兼容。 [API文档](http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions)说:“为了与2.x向后兼容,可以使用field属性代替名称”。你可以使用'displayName'来改变列在网格上的标题方式,如下所示:'{name:'field1',displayName:'pretty display name'}'。 – Ville 2014-11-01 06:24:25

+0

我有同样的问题。我在http.get调用之前给了gridOptions,并在成功部分中给出了scope.gridOptions {data:GET RESPONSE DATA}。 – Shamseer 2015-09-06 19:32:21