AngularJS:组件不会显示通过HTTP加载的数据

时间:2018-04-10 09:28:05

标签: javascript angularjs

我希望实现类似的功能:在我的组件中发送HTTP请求,然后获取数据,最后我可以在我的组件中显示这些数据。虽然我可以通过HTTP请求获取数据,但我现在无法在我的组件中显示它们。我的代码有什么问题,我该怎么办?

这是我的组件html:

<div class="box box-solid">
<div class="box-header">
    <div class="app-info-wrapper">
        <img class="info-pic" src="" alt="ss">
        <div class="app-info">
            <p>name: {{$ctrl.app.name}}</p>
            <p>create at:{{$ctrl.app.createTime}}</p>
            <p>creator:{{$ctrl.app.creator}}</p>
        </div>
    </div>
</div>
<div class="box-body">
    The body of the box
</div>

这是我的组件js:

angular.module('myApp').component('appInfo',{
    templateUrl: 'component/app-info/app-info.html',
    controller: ['$http','$log',function appInfoCtrl($http,$log){
        $http({
            url: "/api/app/1",
            method: "get"
        }).then(function (response) {
            this.app = response.data;
        });
    }]
});

response.data:

{"id":1,"name":"test demo","createTime":"2018-01-01 00:09:02","creator":"cr"}

1 个答案:

答案 0 :(得分:1)

您的代码存在问题:

this.app = response.data;

this这里没有指向控制器。它指向匿名函数的上下文。要纠正这个问题,您可以将控制器上下文的引用保存在变量中,并像这样使用它:

controller: ['$http','$log',function appInfoCtrl($http,$log){
    var vm = this;

    $http({
        url: "/api/app/1",
        method: "get"
    }).then(function (response) {
        vm.app = response.data;
    });
}]

或者,您可以使用arrow function完全跳过使用vm,如下所示:

controller: ['$http','$log',function appInfoCtrl($http,$log){
    $http({
        url: "/api/app/1",
        method: "get"
    }).then(response => {
        this.app = response.data;
    });
}]