Javascript 无法访问angularjs控制器中对象的属性，但可以从HTML访问该属性

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>

服务：

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

发生的事情是，当我在控制器中使用服务“yearfifteenda”时，http被正确调用，并给出一个包含属性数据的响应。我使用响应中的数据，并将其传递给使用它的控制器。这些控制器能够访问从服务返回的对象，但不能访问其属性

回复链接：

提前谢谢

为您服务

您必须考虑到这些

.then（）

函数是异步运行的，这意味着

main.data

的赋值将在您调用console.log之后发生

那么，这应该是可行的：

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（）

s放入$timeout内，因为main.fifteenda.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（）

）完成。两秒钟应该足够了您的

main。只有在承诺解析发生时（即then（）），数据才会被值填充在此之前，它是未定义的，如果您需要进一步处理此数据，最好将其移到控制器中。您可以共享您在main.fifteenda和main？中获得的数据。@rakeshburburbure数据可以在代码中http调用的URL中找到。@RobyRodriguez如果是这样，不应该是“main.fifteenda”“还未定义。但是这会返回一个object，在没有$timeout的情况下，是否可以执行此操作？通过改变服务？抱歉耽搁了。有一种方法涉及两个承诺，一个在您的服务中，另一个在您的控制器中。在这个答案中有一个非常容易实现的例子：默认情况下，这是初始化变量的“正常”方式。通常，控制器必须定义一个$onInit（），或者一个调用所有服务以设置控制器变量的自定义init（）方法。如果确实需要尽快初始化变量，请在未设置变量时尝试使用ng If。希望这有帮助
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
}]);