Looking to implement my mocked data loading using a promise, similar to the approach shown in the Angular2 Tutorial found here.
Service (Mock):
import { Injectable } from '@angular/core';
import { ERGEBNISSE } from "./mock-ergebnisse";
@Injectable()
export class ErgebnisMockService {
getErgebnisse() {
return Promise.resolve(ERGEBNISSE);
}
}
Component:
import { Component, OnInit } from '@angular/core';
import { ErgebnisMockService } from "../shared/mocks/ergebnis.mock.service";
@Component({
moduleId: module.id,
selector: 'ergebnisse',
templateUrl: 'ergebnisse.component.html',
styleUrls: ['ergebnisse.component.css'],
providers: [ErgebnisMockService]
})
export class ErgebnisseComponent implements OnInit {
ergebnisse: any;
constructor(private ergebnisService: ErgebnisMockService) {
}
ngOnInit() {
this.getErgebnisse();
}
getErgebnisse() {
this.ergebnisService.getErgebnisse().then(data => this.ergebnisse = data);
}
}
Encountering an error in the console:
ORIGINAL EXCEPTION: TypeError: Cannot read property 'Bereich' of undefinedWhen I remove the promise and return the mock-object directly, everything works as expected:
getErgebnisseWithoutPromise() {
return ERGEBNISSE;
}
Upon logging the resolved Object, it shows the mock-object as expected:
getErgebnisse() {
this.ergebnisService.getErgebnisse().then(
data => {
this.ergebnisse = data;
console.log(this.ergebnisse);
}
);
}
This returns:
Object {Bereich: Array[3]}
>Bereich:Array[3]
>__proto__:Object`
Any ideas on what could be going wrong here?
Appreciate any assistance!