我希望实现类似的功能:在我的组件中发送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"}
答案 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;
});
}]