Angularjs 1.6 组件：类型错误：无法设置未定义的属性'detailsView'

Question

.component.js class

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

加：

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

加：休息服务.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

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