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

Question

.component.js的类

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.breachDetailsS​​ervice.getBreachDetails是不是一个函数

我已经注入服务使用以下：

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

地址： 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

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