Как я могу справиться с Угловое обещание в контроллере, используя машинопись

Question

У меня есть служба, которая делает запрос на некоторые данные:

/// <reference path="../../typings/reference.ts" /> 

module app { 
'use strict'; 

export class VehicleMakeService { 

    static $inject = ['$http']; 
    constructor(private $http: ng.IHttpService) {} 

    getVehicles(): ng.IPromise<any> { 

     return this.$http.get('https://api.edmunds.com/api/vehicle/v2/makes?state=used&year=2015&view=basic&fmt=json') 
     .then(function(response) { 
      return response.data; 
     }); 
    } 
} 

angular.module('app').service('VehicleMakeService', VehicleMakeService); 
} 

Это работает, как ожидалось, однако при попытке извлечь данные в контроллере Я получаю «Promise {$$ state: object}».

Вот контроллер:

/// <reference path="../../typings/reference.ts" /> 

module app { 
'use strict'; 

interface ISearchController { 
    vehicles: any; 
    setVehicles(): void; 
} 

class SearchController implements ISearchController { 

    vehicles: any; 

    static $inject = ['VehicleMakeService']; 
    constructor(private vehicleMakeService: VehicleMakeService) { 
     this.vehicles = {}; 
     this.setVehicles();  
    } 

    setVehicles(): void { 
     this.vehicles = this.vehicleMakeService.getVehicles(); 
     console.log(this.vehicles); 
    } 
} 
angular.module('app').controller('SearchController', SearchController); 
} 

Я попытался решения в контроллере:

setVehicles(): void { 
     this.vehicleMakeService.getVehicles().then(function(data) { 
      this.vehicles = data; 
      console.log(this.vehicles); 
     }); 
    } 

Но тогда я получаю 'TypeError: Не удается установить свойство 'транспортные средства' неопределенных'.

Обычно я обрабатываю такие вещи в функции разрешения в конфигурации модуля, но в этом случае я не могу.

Answer 1

Вы также можете использовать функцию стрелка из TS/ES6 так:

setVehicles(): void { 
    this.vehicleMakeService.getVehicles().then((data) => { 
     this.vehicles = data; 
     console.log(this.vehicles); 
    }); 
} 

кстати. вы не должны использовать внутренние модули в TS так плохо;)

вы можете проверить мое приложение скелета примера с внешними модулями Angular 1.x и TypeScript here.

Answer 2

С getVehicles метод возвращает объект обещания, необходимо использовать его правильно и никогда не забывать об асинхронности HTTP-запросов. Также контекст обратного вызова в then будет отличаться, так что вы также должны принять его, например, с bind методом:

setVehicles(): void { 
    this.vehicleMakeService.getVehicles().then(function(data) { 
     this.vehicles = data; 
     console.log(this.vehicles); 
    }.bind(this)); 
}