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

Question

我想实现的是:在我的组件中发送一个 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;
        });
    }]
});

响应.数据:

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

Answer 1

你的代码的问题是这一行:

this.app = response.data;

this 这里没有指向 Controller 。它指向匿名函数的上下文。要更正此问题，您可以将 Controller 上下文的引用保存在变量中并像这样使用它:

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