javascript - 下拉组件填充数据，只有虚拟数据有效

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

查看组件:

(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>