Drop-Down-Komponente mit Daten füllen, nur Dummy-Daten funktioniert

Question

Ich habe ein Problem beim Auffüllen von Daten in Drop-Down-Komponente. Wenn ich es mit Dummy-JSON-Daten mache (wie in den Kommentaren), dann funktioniert alles gut.

GET Request Service zieht notwendige Daten, dann bin ich es zuweisen Antwort auf entsprechende Variable. Service abrufen und Dropdown-Komponente werden in einer anderen View-Komponente platziert.

Keine Fehlermeldung in der Konsole ... was vermisse ich hier?

GET-Anfragen Service:

(function() { 
    "use strict"; 
    angular.module('app').factory('GetService', function ($http) { 
     return{ 
      get: function (uri, config) { 
       $http.get(uri, config). 
        then(function(response) { 
         return response.data; 
        }); 
      } 
     } 
    }); 
}()); 

Ausgliederungs Komponente, die JSON-Daten akzeptiert.

(function() { 
"use strict"; 

var module = angular.module("app"); 
module.component("dropDown", { 
    template: 
    <div class="input-group"> 
     <span class="input-group-addon">{{vm.placeholder}}</span> 
     <select class="form-control" 
      ng-model="vm.selectedItem" 
      ng-options="option.name for option in vm.items"></select> 
    </div>, 
    controllerAs: "vm", 
    bindings: { 
     placeholder: '@', 
     itemlist: '=' 
    }, 
    controller: function() { 
     var vm = this; 
     vm.items = vm.itemlist; 
     vm.selectedItem = vm.itemlist[0]; 
    } 
}); 
})(); 

View-Komponente:

(function() { 
    "use strict"; 
    var module = angular.module('app'); 

    function controller(GetService) { 
     var vm = this; 
     vm.$onInit = function() {    
      vm.doprdown1url = "/Controller/Action1"; 
      vm.doprdown2url = "/Controller/Action2"; 
      vm.dd1List = []; 
      vm.dd2List = []; 
      GetService.get(vm.doprdown1url, null).then(function (data) { 
       vm.dd1List = JSON.parse(data.data); 
      }); 
      GetService.get(vm.doprdown2url, null).then(function (data) { 
       vm.dd2List = JSON.parse(data.data); 
      }); 
      //vm.dd1List = [{ 
      // id: 0, 
      // name: 'Arm' 
      //}, { 
      // id: 1, 
      // name: 'Leg' 
      //}, { 
      // id: 2, 
      // name: 'Hand' 
      //}]; 

      //vm.dd2List = [{ 
      // id: 0, 
      // name: 'Eye' 
      //}, { 
      // id: 1, 
      // name: 'Nose' 
      //}, { 
      // id: 2, 
      // name: 'Ear' 
      //}]; 
     } 
    } 

    module.component("view1", { 
     template: 
     <p> 
      <drop-down placeholder="Title" itemlist="vm.dd1List"></drop-down> 
      <drop-down placeholder="Title2" itemlist="vm.dd2List"></drop-down> 
     </p>, 
     controllerAs: "vm", 
     controller: ["$http", controller] 
    }); 
}()); 

Answer 1

Es ist, weil alle Ihre Vorlagen geladen werden, bevor der Dienst alle Daten zurückgibt. Die hässliche Lösung ist Timeout zu verwenden, um sicherzustellen, dass das Problem von dort kommt. (Siehe unten Snippet, müssen Sie 5 Sekunden warten, um das Ergebnis zu sehen)

Die bessere Lösung ist es, den Service von der untergeordneten Komponente durch die require option

function GetService($http) { 
 
    return{ 
 
    get: function (uri, config) { 
 
     $http.get(uri, config). 
 
     then(function(response) { 
 
     return response.data; 
 
     }, function(response) { 
 
     return response; 
 
     }); 
 
    } 
 
    } 
 
}; 
 
var dropDown = { 
 
    template: ` 
 
    <div class="input-group"> 
 
     <span class="input-group-addon">{{$ctrl.placeholder}}</span> 
 
     <select class="form-control" 
 
      ng-model="$ctrl.selectedItem" 
 
      ng-options="option.name for option in $ctrl.items"></select> 
 
    </div>`, 
 
    bindings: { 
 
     placeholder: '@', 
 
     itemlist: '=' 
 
    }, 
 
    controller: function($timeout) { 
 
     var vm = this; 
 
     $timeout(function() { 
 
      console.log(vm.itemlist); 
 
      vm.items = vm.itemlist; 
 
      vm.selectedItem = vm.itemlist[0]; 
 
     }, 5000); 
 
    } 
 
}; 
 
function controller(GetService) { 
 
    var vm = this; 
 
    vm.$onInit = function() {    
 
    vm.doprdown1url = "https://randomuser.me/api/"; 
 
    vm.doprdown2url = "https://randomuser.me/api/"; 
 
    vm.dd1List = []; 
 
    vm.dd2List = []; 
 
    GetService.get(vm.doprdown1url, null).then(function (data) { 
 
     console.log(data.data.info.seed); 
 
     vm.dd1List = [{id: 1, name: data.data.info.seed}]; 
 
    }); 
 
    GetService.get(vm.doprdown2url, null).then(function (data) { 
 
     console.log(data.data.info.seed); 
 
     vm.dd2List = [{id: 1, name: data.data.info.seed}]; 
 
    }); 
 
    } 
 
}; 
 

 
var view1 = { 
 
    template: ` 
 
    <p> 
 
    <drop-down placeholder="Title" itemlist="$ctrl.dd1List"></drop-down> 
 
    <drop-down placeholder="Title2" itemlist="$ctrl.dd2List"></drop-down> 
 
    </p>`, 
 
    controller: ["$http", controller] 
 
}; 
 

 
angular.module('myApp', []); 
 
angular 
 
    .module('myApp') 
 
    .factory('GetService', GetService) 
 
    .component('dropDown', dropDown) 
 
    .component('view1', view1);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <view1></view1> 
 
</div>