无法使用带有 TypeScript 的 Angular 1.6 从服务中获取数据

Question

我在从 Controller 中的服务访问数据时遇到问题。 这是我的服务的文件代码：

import {IHttpService} from 'Angular';

export class MyService {
public static $inject = ['$http'];
constructor(private $http:IHttpService, private getItems){

this.getItems= function() {
  this.$http.get('items.json').then(function(response){
    if(err){
      console.error(err);
    }
    console.log(response.data);
    return response.data;
  });
}}}

以及Controller的文件代码：

import {MyService} from './MyService';
export class MyController {
public:getData;
static inject: Array<string> = ['$http', '$scope', 'MyService'];
constructor(private $http:ng.IHttpService, private $scope:any, private MyService:any){
    this.getData = function(){
      MyService.getItems.then(function (data) {
      this.getItems = data;

      console.log(data);
    });
  }

}

谁能解释我的代码有什么问题？谢谢。

Answer 1

在getItems方法里面返回promise，应该是，

this.getItems= function() {
  return this.$http.get('items.json').then(function(response){
    if(err){
      console.error(err);
    }
    console.log(response.data);
    return response.data;
  });
}}}

Answer 2

将函数声明更改为以下方式或使用Arrow 函数，以便保留类的this(context)。另外你必须从getItems方法返回$httppromise，否则你不能在它上面应用.then方法来链promise。

getItems() {
  //return promise here.
  return this.$http.get('items.json').then((response) => {
    if(err){
      console.error(err);
    }
    console.log(response.data);
    //returning data to chained promise.
    return response.data;
  });
}