下拉組件填充數據，只有虛擬數據工作

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>