下拉组件填充数据，只有虚拟数据工作

Question

我在下拉组件中填充数据时遇到问题。当我使用虚拟JSON数据（如评论中）执行此操作时，则所有工作都正常。

GET请求服务拉取必要的数据，然后我将它的响应分配给适当的变量。 获取服务并下拉组件被放置在另一个View组件中。

在控制台中没有错误信息...我在这里错过了什么？

GET请求的服务：

(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; 
        }); 
      } 
     } 
    }); 
}()); 

接受JSON数据下拉组件。

(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组件：

(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

这是因为服务返回的任何数据之前，所有的模板被加载。 丑陋的解决方案是使用超时来确保问题来自那里。 （请参见下面的代码片段，你需要等待5秒钟看到的结果）

更好的解决方案是通过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>