AngularJS / Promises / DataTables - нет данных в таблице - PullRequest
Новая
       18

AngularJS / Promises / DataTables - нет данных в таблице

0 голосов
/ 18 апреля 2019

У меня есть контроллер в предоставленном модуле, который использует данные из файла JSON или вызова API.Версия файла JSON GetActionItems2() работает отлично.К сожалению, я не могу заставить GetActionItems() работать так же, как его функция-аналог (версия JSON).Я использую отложенные обещания и Angular DataTables.В консоли нет ошибок, но в моей таблице нет данных на странице.

Как мне решить эту проблему?

Контроллер 

angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', '$q', 'DTOptionsBuilder', function($http, $resource, $scope, $state, $timeout, $q, DTOptionsBuilder){
        $scope.actionitems = {};    

        function GetActionItems2()
        {
           return $resource('actionitems.json').query().$promise;
        }

        function GetActionItems() {           
            var defer = $q.defer();
            $http.get('api/actionitems')
                 .then(function(response){
                    defer.resolve(response);
                 });
            return defer.promise;
        }   

        $scope.init = function(){
            var vm = this;
            vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
                var defer = $q.defer();
                GetActionItems().then(function(result) {
                    $scope.actionitems = result;
                    defer.resolve(result);
                });
                return defer.promise;
            })
            .withPaginationType('full_numbers')
            //.withOption('drawCallback', reload)
            .withDisplayLength(10)
            //.withOption('order', [1, 'desc'])
            .withOption('scrollY', 500)
            .withOption('scrollX', '100%')
            .withDOM('lftrpi')
            .withScroller();
        }           
}]);

Шаблон 

<div ng-init="init()" ng-controller="ActionController">
   ActionItems
    <table id="actionitems" class="row-border hover action" datatable="" dt-options="dtOptions">
         <thead>
            <tr>
                <th>
                    ID
                </th>
                <th>
                    Action Item Title
                </th>
                 <th>
                    Criticality
                </th>
                <th>
                    Assignor
                </th>
                <th>
                    Owner
                </th>
                <th>
                    Alt Owner
                </th>
                <th>
                    Approver
                </th>
                <th>
                    Assigned Date
                </th>
                <th>
                    DueDate
                </th>
                <th>
                    ECD
                </th>
                <th>
                    Completion Date
                </th>
                <th>
                    Closed Date
                </th>
                <th>
                    Team
                </th>
                  <th>
                    Meeting
                </th>
                  <th>
                    Phase
                </th>
                  <th>
                    Source
                </th>
            </tr>
         </thead> 
         <tbody>
            <tr ng-repeat="actionitem in actionitems">
               <td>{{actionitem.ActionItemID}}</td> 
               <td>{{actionitem.Title}}</td> 
               <td>{{actionitem.Criticality}}</td>
               <td>{{actionitem.Assignor}}</td> 
               <td>{{actionitem.Owner}}</td>
               <td>{{actionitem.AltOwner}}</td> 
               <td>{{actionitem.Approver}}</td> 
               <td>{{actionitem.AssignedDate}}</td> 
               <td>{{actionitem.DueDate}}</td> 
               <td>{{actionitem.ECD}}</td> 
               <td>{{actionitem.CompletionDate}}</td> 
               <td>{{actionitem.ClosedDate}}</td> 
         </tbody>     
    </table>
</div>

Ответы [ 3 ]

1 голос
/ 18 апреля 2019

Возвращение $http.get('api/actionitems').then(function(result) в fromFnPromise со встроенным return result.data внутри function(result) решило проблему и позволило избежать использования отложенного анти-паттерна.

$scope.init = function() {
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
        return $http.get('api/actionitems').then(function(result) {
            $.each(result.data, function(key, actionitem) {
                result.data[key] = [
                    actionitem.actionitemid,
                    actionitem.actionitemtitle,
                    actionitem.criticality,
                    actionitem.assignor,
                    actionitem.owner,
                    actionitem.altowner,
                    actionitem.approver,
                    actionitem.assigneddate,
                    actionitem.duedate,
                    actionitem.ecd,
                    actionitem.completiondate,
                    actionitem.closeddate
                ];
            });
            $scope.actionitems = result.data;
            return result.data;
        });
    })
    .withPaginationType('full_numbers')
    //.withOption('drawCallback', reload)
    .withDisplayLength(10)
    //.withOption('order', [1, 'desc'])
    .withOption('scrollY', 500)
    .withOption('scrollX', '100%')
    .withDOM('lftrpi')
    .withScroller();
}
0 голосов
/ 18 апреля 2019

СМОТРЕТЬ РЕДАКТИРОВАТЬ НИЖЕ

Моим первоначальным решением было двухэтапное получение данных в мою таблицу.

Я ввел пользовательскую функцию apply, а затем *Функция 1008 *, которая затем заполняет массив элементов действий отдельными элементами действий только с массивом значений, которые необходимо отправить в таблицы данных и присвоить $scope.acionitems.В противном случае я получил бы предупреждение от таблиц данных о том, что формат каждого элемента в формате JSON с соответствующими ключами. 

angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', '$q', 'DTOptionsBuilder', function($http, $resource, $scope, $state, $timeout, $q, DTOptionsBuilder){
        $scope.actionitems = {};    

        function GetActionItems2()
        {
           return $resource('actionitems.json').query().$promise;
        }

        function GetActionItems() {           
            var defer = $q.defer();
            $http.get('api/actionitems')
                 .then(function(response){
                     defer.resolve(response);
                 });
            return defer.promise;
        }   

        var getRes = function(res){
            $.each(res, function(key, actionitem){
                res[key] =  [ 
                                actionitem.actionitemid, 
                                actionitem.actionitemtitle,
                                actionitem.criticality,
                                actionitem.assignor,
                                actionitem.owner,
                                actionitem.altowner,
                                actionitem.approver,
                                actionitem.assigneddate,
                                actionitem.duedate,
                                actionitem.ecd,
                                actionitem.completiondate,
                                actionitem.closeddate
                            ];           

            });
            $scope.actionitems = res;
        }

        function apply(scope, fn, res) {
            (scope.$$phase || scope.$root.$$phase) ? 
                        fn(res) : 
                        scope.$apply(fn(res));
        }

        $scope.init = function(){
            var vm = this;
            vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
                var defer = $q.defer();

                GetActionItems().then(function(result){
                    apply($scope, getRes, result.data);
                    defer.resolve(result.data);
                });

                return defer.promise;
            })
            .withPaginationType('full_numbers')
            //.withOption('drawCallback', reload)
            .withDisplayLength(10)
            //.withOption('order', [1, 'desc'])
            .withOption('scrollY', 500)
            .withOption('scrollX', '100%')
            .withDOM('lftrpi')
            .withScroller();
        }           
}]);

РЕДАКТИРОВАТЬ

Я упростилкод и использовал определение фактического атрибута данных результата, а не сам объект, который произвел данные в моей таблице.

Следующая модификация, основанная на моем использовании Anti-Pattern, - лучшее, что я мог получить до сих пордобиться тех же результатов. 

angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', '$q', 'DTOptionsBuilder', function($http, $resource, $scope, $state, $timeout, $q, DTOptionsBuilder){
        $scope.actionitems = {};    

        function GetActionItems2()
        {
           return $resource('actionitems.json').query().$promise;
        }

        function GetActionItems() {           
            var defer = $q.defer();
            var res = $http.get('api/actionitems').then(function(result){
            var data = result.data;
            $.each(data, function(key, actionitem){
                data[key] =  [ 
                            actionitem.actionitemid, 
                            actionitem.actionitemtitle,
                            actionitem.criticality,
                            actionitem.assignor,
                            actionitem.owner,
                            actionitem.altowner,
                            actionitem.approver,
                            actionitem.assigneddate,
                            actionitem.duedate,
                            actionitem.ecd,
                            actionitem.completiondate,
                            actionitem.closeddate
                        ];    

                });
                $scope.actionitems = data;
                defer.resolve(data);
            });
            return defer.promise;
        }   

        $scope.init = function(){
            var vm = this;
            vm.dtOptions = DTOptionsBuilder
            .fromFnPromise(GetActionItems)
            .withPaginationType('full_numbers')
            //.withOption('drawCallback', reload)
            .withDisplayLength(10)
            //.withOption('order', [1, 'desc'])
            .withOption('scrollY', 500)
            .withOption('scrollX', '100%')
            .withDOM('lftrpi')
            .withScroller();
        }           
}]);
0 голосов
/ 18 апреля 2019

Если эта асинхронная обработка выполняется третьей стороной, вам может потребоваться вручную запустить обновление данных для этого контроллера. 

// ...
$scope.init = function(){
   var vm = this;
   vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
       var defer = $q.defer();
       GetActionItems().then(function(result) {
           $scope.actionitems = result;

           // here trigger a data update
           $scope.$digest();

           defer.resolve(result);
       });
    return defer.promise;
})
// ...

Метод $digest заключается в ручном запуске обнаружения измененияконтроллера.

...