もう一つの非同期サービスは未定義

Question

を返すこれが私のサービスです。

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .service('ClientsService', Service); 

    function Service($http) { 

     function getClients() { 
      $http.get('app/client/clients.json') 
       .then(function(res){ 
        return res.data; 
       }); 
     } 

     return { 
      getClients: getClients, 
     }; 
    } 
})(); 

私はJSONファイルからクライアントを入手することができますI then内部のコンソールログ場合。 は、その後、私は私のコンポーネントでサービスを利用したい：

(function() { 
    'use strict'; 

    var module = angular.module('app'); 

    module.component("client", { 
     templateUrl: "app/client/client.html", 
     controllerAs: "model", 
     controller: function (ClientsService) { 
      var model = this; 
      model.clients = ClientsService.getClients(); 
      console.log(model.clients) 
     } 
    }); 
})(); 

しかし、ログには、私を言う：undefined。

どうすれば修正できますか？

Answer 1

これが機能するには、わずかなリファクタリングが必要です。

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .service('ClientsService', Service); 

    function Service($http) { 

     function getClients() { 
      //Notice the return here? we're returning a promise. 
      return $http.get('app/client/clients.json') 
       .then(function(res){ 
        return res.data; 
       }); 
     } 

     return { 
      getClients: getClients, 
     }; 
    } 
})(); 

(function() { 
    'use strict'; 

    var module = angular.module('app'); 

    module.component("client", { 
     templateUrl: "app/client/client.html", 
     controllerAs: "model", 
     controller: function (ClientsService) { 
      var model = this; 
      //getClients() now returns a promise that is resolved 
      //when the client list is loaded 
      ClientsService.getClients().then(function(clients){ 
       model.clients = clients; 
       console.log(model.clients); 
      }); 
     } 
    }); 
})(); 

Answer 2

これは、http要求が完了していないためです。 httpリクエストが完了した後にのみデータを取得します。次のコードを試してみてください。また、http promiseをサービスから返します。

module.component("client", { 
    templateUrl: "app/client/client.html", 
    controllerAs: "model", 
    controller: function (ClientsService) { 
     var model = this; 
     ClientsService.getClients().then(function(clients){ 
      model.clients = clients; 
      console.log(model.clients) 
     }) 
    } 
}); 

このような変更サービス：

(function() { 
'use strict'; 

angular 
    .module('app') 
    .service('ClientsService', Service); 

function Service($http) { 

    function getClients() { 
     return $http.get('app/client/clients.json') 
      .then(function(res){ 
       return res.data; 
      }); 
    } 

    return { 
     getClients: getClients, 
    }; 
} 

}）（）;