2014-10-29 154 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