1. ホーム
  2. angularjs

[解決済み】typeerrorは、未定義のプロパティ'data'を読み取ることができません。

2022-01-28 17:20:53

質問

これは私のJSクラスです。このエラーが発生し、UIにグリッド値が表示されません。

define([
       'angular',
                './module'
            ], function(angular, module){
                'use strict',
                module.controller('userSelectController',[
                    '$scope',
                    '$filter',
                    '$http',
                    'filterStateService',
                    'messageBus',
                    'userDetails',
                    'toasty',
                    function($scope,$filter,$http,filterStateService,messageBus, userDetails, toasty){

                        $scope.onAddUser = function(){
                              messageBus.send(Message.AddUser);
                        };

                        $scope.gridOptions = {
                            rowHeight:60,
                            multiSelect: false,
                            enableColumnMenus:false,
                            enableEdit: false,
                            enableSorting: false,
                            enableFiltering: false,

                            columnDefs: [

                                {
                                    field: 'select',
                                    maxWidth: 30,
                                    headerCellTemplate:'<div>&nbsp;<div>',
                                    headerCellClass: 'grid-header-center',
                                    cellClass: 'grid-data-cell',
                                    cellTemplate: '<div class="inner-data-cell"><input type="checkbox"></div>'

                                },
                                            {
                                    field: 'status',
                                    minWidth: 75,
                                    maxWidth: 150,
                                    displayName: 'Status',
                                    headerCellClass: 'grid-header-center',
                                    cellClass: 'grid-data-cell',
                                    'cellTemplate': '<div class="inner-data-cell">{{row.entity.registrationStatus}}</div>'
                                },
                                {
                                    field: 'name',
                                    minWidth: 75,
                                    maxWidth: 150,
                                    displayName: 'Name',
                                    headerCellClass: 'grid-header-center',
                                    cellClass: 'grid-data-cell',
                                    cellTemplate: '<div class="inner-data-cell">{{row.entity.lastName}},{{row.entity.firstName}}</div>'
                                },
                                {
                                    field: 'organization',
                                    minWidth: 150,
                                    displayName: 'Org',
                                    headerCellClass: 'grid-header-center',
                                    cellClass: 'grid-data-cell',
                                    cellTemplate: '<div class="inner-data-cell">{{row.entity.organization}}</div>'
                                },
                                {
                                    field: 'registratioDate',
                                    minWidth: 150,
                                    displayName: 'Registration Date',
                                    headerCellClass: 'grid-header-center',
                                    cellClass: 'grid-data-cell',
                                    cellTemplate: '<div class="inner-data-cell">{{row.entity.registeredOn}}</div>'
                                },
                                {
                                    field: 'lastActive',
                                    minWidth: 220,
                                    displayName: 'Last Active',
                                    headerCellClass: 'grid-header-center',
                                    cellClass: 'grid-data-cell',
                                    cellTemplate: '<div class="inner-data-cell">{{row.entity.lastActive}}</div>'
                                },
                                {
                                    field: 'uplaodId',
                                    minWidth: 200,
                                    displayName: 'Upload Id',
                                    headerCellClass: 'grid-header-center',
                                    cellClass: 'grid-data-cell',
                                    cellTemplate: '<div class="inner-data-cell">NA</div>'
                                }
                            ],

                            filterOptions: $scope.filterOptions
                        };


                        $scope.filterName = function() {

                            var filterText = $scope.nameFilter;
                            if (filterText != null ) {
                                alert("M not null");
                              $scope.filterOptions.filterText = filterText;
                            } else {
                              $scope.filterOptions.filterText = '';
                            }
                          };


                          $scope.resetSearchQuery =  function() {

                              $scope.query = '';
                              filterStateService.updateSearchQuery($scope.query);

                           };




                          $scope.numberRecordsFound = 0;
                          $scope.$onMessage(Message.NumberOfSearchRecordsChanged, function (event, numberRecordsFound) {

                              $scope.numberRecordsFound = numberRecordsFound;

                           });

                      /*  $scope.filterOnLocation = function(gridOptions) {
                            return (gridOptions.firstName + gridOptions.lastName).indexOf($scope.search) >= 0;
                          };*/

                          var userList = [
                                          {
                                              registrationStatus:'Added',
                                              firstName:'first1',
                                              lastName:'last1',
                                              organization:'org1',
                                              registeredOn:'date1',
                                              lastActive:'date1'
                                          },
                                          {
                                              registrationStatus:'Added',
                                              firstName:'first2',
                                              lastName:'last2',
                                              organization:'org2',
                                              registeredOn:'date2',
                                              lastActive:'date2'
                                          },
                                          {
                                              registrationStatus:'Added',
                                              firstName:'first3',
                                              lastName:'last3',
                                              organization:'org3',
                                              registeredOn:'date3',
                                              lastActive:'date3'
                                          },
                                          {
                                              registrationStatus:'Added',
                                              firstName:'first4',
                                              lastName:'last4',
                                              organization:'org4',
                                              registeredOn:'date4',
                                              lastActive:'date4'
                                          },
                                          {
                                              registrationStatus:'Added',
                                              firstName:'first5',
                                              lastName:'last5',
                                              organization:'org5',
                                              registeredOn:'date5',
                                              lastActive:'date5'
                                          },
                                          {
                                              registrationStatus:'Added',
                                              firstName:'Priyanka',
                                              lastName:'Taneja',
                                              organization:'GE',
                                              registeredOn:'25-JAN-2016 : 12:34 pm',
                                              lastActive:'date5'
                                          }

                                      ];

                        $scope.gridOptions.data = userList;
                        $scope.filterData = function (){
                            $scope.gridOptions.data = $filter('filter')(userList,$scope.searchText, undefined);
                        } 

                }])

            })

            This is my HTML class

            <div ng-controller="userSelectController" class="full-panel-container">

                <div class="row title-bar">

                    <!-- Add User -->
                    <div class="div-actions col-sm-4 col-md-3 group1">
                        <span class="title-text">Users &nbsp</span>
                     <button class="btn btn-large btn-icon" title="{{getAddTitle()}}" id="add-user-btn" ng-click="onAddUser()">
                            <i class="fa fa-plus"></i>
                        </button>
                <button class="btn btn-large btn-icon" title="{{getAddTitle()}}" id="add-user-btn" ng-click="onAddUser()">
                            <i class="fa fa-cloud-upload fa-lg title-action"> &nbsp</i>
                        </button>
                    </div>

                    <!-- search -->         
                    <div class="col-sm-8 col-md-9 group2 pull-left">

                    <input title="" type="text" size="50" class="title-search ng-pristine ng-valid" placeholder="Enter search text" ng-change="filterData()" ng-model="searchText">


                        <i class="fa fa-search fa-lg" style="margin-left: -25px;" title="{{getSearchTitle()}}" ng-if="!query.length"></i> 
                          <i class="fa fa-times" style="margin-left: -25px;" title="{{::'title.search.clear' | translate}}" ng-if="query.length" ng-click="resetSearchQuery();"></i>

                    </div>


                     <!--  <div class="hidden">{{filteredLength = gridData.data.length}}</div>
                        <div class="no-records" ng-show="!organizationDetailsFilteredList.length">
                           {{:: 'text.search.no.records' | translate }}
                        </div> -->
                     </div>


                </div>

                <div class="full-panle-body">
                    <div class="row job-summary-grid" ng-show="!loadingLog">
                        <div ui-grid="gridOptions" ui-if="gridData.data.length>0" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning></div>
                    </div>

                </div>

このエラーが発生し、UIにグリッド値が表示されません。

どうすればいいですか?

gridData.data.length を呼び出していますが、コントローラに gridData オブジェクトが定義されていません。gridOptions.data.lengthであるべきではないでしょうか?