无法访问在angularjs控制器的对象的属性，但能够从HTML访问它

Question

的HTML代码：

<div ng-controller="teamWiseResults as tr"> 
    <p>{{tr.fifteenData.data}}</p> 
    <p>{{tr.fifteenData.data.name}}</p> <!--Prints the data and name within data perfectly--> 
</div> 

控制器：

footieApp.controller("teamWiseResults",['yearFifteenData','yearSixteenData',function(yearFifteenData,yearSixteenData){ 
    var main = this;  
    main.fifteenData = yearFifteenData; 
    console.log(main.fifteenData); //Prints perfectly on the console with the property "data" within it 
    console.log(main.fifteenData.data); //Prints undefined even though it has the property "data" within it 
}]); 

服务：

var footieApp = angular.module("footieApp", []) 
    .service('yearFifteenData', function($http) { 
     var main=this; 
     $http({ 
      method: "GET", 
      url: "https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json" 
     }).then((response) => { 
      main.data = response.data; 
     }, (response) => { 
      main.data = response.statusText; 
     }); 
     console.log(main); //Prints the object perfectly, which has the property "data" within. 
     console.log(main.data); //Gives undefined 
     return main; 
    }); 

发生什么事情是，当我在控制器内使用服务“yearFifteenData”时，http被正确调用，并且gi在其中有属性数据的响应。我使用响应中的这些数据并将其传递给使用它的控制器。这些控制器能够从服务访问返回的对象，但无法访问它的属性。该程序存储库的

链接：https://github.com/spramod49/PL-football-data-app

提前感谢！

Answer 1

在服务

您必须考虑那些.then()功能异步运行，这意味着你的console.log的电话后会发生main.data转让的事实。

那么，这应该工作：

var footieApp = angular.module("footieApp", []) 
    .service('yearFifteenData', function($http) { 
     var main=this; 
     $http({ 
      method: "GET", 
      url: "https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json" 
     }).then((response) => { 
      main.data = response.data; 
      console.log(main.data); //Should not give undefined 
     }, (response) => { 
      main.data = response.statusText; 
     }); 
     console.log(main); //Prints the object perfectly, which has the property "data" within. 

     return main; 
    }); 

在你的控制器

尽量把那些console.log()个$超时内，因为main.fifteenData.data是HTTP调用后定义，这可能需要几秒钟：

footieApp.controller("teamWiseResults",['yearFifteenData','yearSixteenData', '$timeout',function(yearFifteenData,yearSixteenData, $timeout){ 
    var main = this;  
    main.fifteenData = yearFifteenData; 
    $timeout(() => console.log(main.fifteenData.data), 2000); 
    console.log(main.fifteenData); //Prints perfectly on the console with the property "data" within it 
}]); 

再次，你必须“等到这个承诺（即.then()）已完成。两秒钟就够了