AngularJS 1.6 Komponente: Typeerror: Kann nicht gesetzt Eigenschaft 'Details' undefinierten

Question

.component.js Klasse

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

was hier falsch - ich machen versuchen, Service, um die Daten von HTTP-Aufruf zu erhalten, bekomme ich einen Fehler TypeError: this.breachDetailsService.getBreachDetails ist keine Funktion

Ich habe den Dienst mit folgenden injizieren

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

ADD: restservice.js Klasse

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

Das ist alles, was ich für configure haben, gibt es keine Controller js

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

Answer 1

da Sie Typoskript arbeiten, verwenden arrow function (ES6 neues Feature) um den Kontext zu behalten.

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

oder Sie this manuell

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