$ http.get 호출은 잘못된 데이터를 Angular UI-Grid 컨트롤로 반환합니다.

Question

이것은 AngularJS 및 nodejs을 사용하고 express 프레임 워크를 백엔드로 사용하는 첫 번째 ui-grid 응용 프로그램입니다.

API가 잘 실행되고 데이터가 브라우저로 전송되지만 이벤트 시퀀스와 각도 컨텍스트에서 비동기 호출 $http.get() 호출에 대해 혼동스러워합니다.

그래서 화면에 눈금을 넣어야합니다. 이 표는 API에서 데이터를로드해야합니다. 여기

<div class="tile-body" ng-controller="AdminUsersGridCtrl"> 
    <div id="grid" ui-grid="gridOptions" class="grid"></div> 
    </div> 

그리고 내 컨트롤러 : 다음은 HTML 페이지 내 그리드 오브젝트는

app.controller('AdminUsersGridCtrl', function ($scope, $http, uiGridConstants) { 

    $http.get('/api/admin/user') 
    .then(function (response) { 

     $scope.myData = response; 

     $scope.gridOptions = { 
      data: 'myData', 
      enableFiltering: true, 
      columnDefs: [ 
      { field: 'firstName' }, 
      { field: 'lastName' }, 
      { field: 'jobTitle'}, 
      { 
       field: 'email', 
       filter: { 
       condition: uiGridConstants.filter.ENDS_WITH, 
       placeholder: 'ends with' 
       } 
      }, 
      { 
       field: 'phone', 
       filter: { 
       condition: function(searchTerm, cellValue) { 
        var strippedValue = (cellValue + '').replace(/[^\d]/g, ''); 
        return strippedValue.indexOf(searchTerm) >= 0; 
       } 
       } 
      }, 
      ] 
     }; 
    }, 
    function (error) { 
     console.log(error); 
    }); 
    }); 

미안이 순서에 오류가 점점 : 나는 할수 없어

TypeError: Cannot read property 'data' of undefined 
    at new <anonymous> (ui-grid.js:3130) 
    at Object.invoke (angular.js:4604) 
    at extend.instance (angular.js:9855) 
    at nodeLinkFn (angular.js:8927) 
    at angular.js:9231 
    at processQueue (angular.js:15552) 
    at angular.js:15568 
    at Scope.$eval (angular.js:16820) 
    at Scope.$digest (angular.js:16636) 
    at Scope.$apply (angular.js:16928) 

여기서 무슨 일이 일어나고 있는지 알아보십시오. 그 오류 메시지는 어디서 오는가?

Answer 1

promise 호출 외부에서 gridOptions를 초기화해야합니다.

app.controller('AdminUsersGridCtrl', function ($scope, $http, uiGridConstants) { 


     $scope.gridOptions = { 
      enableFiltering: true, 
      columnDefs: [ 
      { field: 'firstName' }, 
      { field: 'lastName' }, 
      { field: 'jobTitle'}, 
      { 
       field: 'email', 
       filter: { 
       condition: uiGridConstants.filter.ENDS_WITH, 
       placeholder: 'ends with' 
       } 
      }, 
      { 
       field: 'phone', 
       filter: { 
       condition: function(searchTerm, cellValue) { 
        var strippedValue = (cellValue + '').replace(/[^\d]/g, ''); 
        return strippedValue.indexOf(searchTerm) >= 0; 
       } 
       } 
      }, 
      ] 
     }; 

    $http.get('/api/admin/user') 
    .then(function (response) { 
     $scope.gridOptions.data = response.data; // Content is in the response.data 
    }, 
    function (error) { 
     console.log(error); 
    }); 
    });