AngularJS와 1.6 구성 요소 : 형식 오류 : 정의되지 않은

Question

.component.js의 설정할 수 없습니다 재산 '은 DetailsView' 클래스

export var breachDetailsConfig = { 
template: template, 
controller: BreachDetailsComponent 
}; 
class BreachDetailsComponent extends AutoBoundDependencies { 

static get $inject() { return ['breachDetailsService', '$http']}; 

constructor(...dependencies) { 
    super(dependencies); 
} 

$onInit(){ 
    this.detailsView = []; 
    this.getBreachDetails().then(function(data){ 
    this.detailsView = data; // getting error here 
    }); 
    // this.getBreachDetails().then(function(detailsView) { 
    //  this.detailsView = detailsView; 
    // }); // want to use this part 

} 

getBreachDetails() { 
    return this.$http.get('breach-mock.json').then((response) => { 
     console.log(response.data); 
     return response.data; 
    }); 
} 
} 

ADD : 잘못된 여기에 무엇을

getBreachDetails() { 
// get the breach details from JSON 
    // this.breachDetailsService.getBreachDetails().then((detailsView) => { 
    // this.detailsView = detailsView; 
    // }); 
} 

- 내가 만들려고 노력하고 있어요 HTTP 호출에서 데이터를 가져 오는 서비스 오류가 발생했습니다. TypeError : this.breachDetailsService.getBreachDetails가 함수가 아닙니다.

다음 서비스를 사용하여 서비스를 주입했습니다. :

는

static get $inject() { return ['breachDetailsService', '$http']}; 

ADD : restservice.js 클래스

import angular from 'angular'; 
import breachDetailsService from './breach-details.service'; 
let restServiceModule = angular.module('rest-services', []); 
restServiceModule.service('breachDetailsService', breachDetailsService); 

이 내가 구성을 위해 모두이다, 아니 컨트롤러 JS가

당신이 타이프 라이터를 사용하고 있기 때문에

export var breachDetailsConfig = { 
template: template, 
controller: BreachDetailsComponent 
}; 

Answer 1

, arrow function를 사용하지있다 (ES6의 새로운 기능) 컨텍스트를 유지합니다.

this.getBreachDetails().then(data => {  // <---- arrow function here 
    this.detailsView = data; // getting error here 
}); 

또는 수동

this.getBreachDetails().then(function(data){ 
    this.detailsView = data; // getting error here 
}.bind(this));