I have just started with Angular2 and I've got an issue I cannot really understand.
I have some mock data created as such:
export const WORKFLOW_DATA: Object = { "testDataArray" : [ { key: "1", name: "Don Meow", source: "cat1.png" }, { key: "2", parent: "1", name: "Roquefort", source: "cat2.png" }, { key: "3", parent: "1", name: "Toulouse", source: "cat3.png" }, { key: "4", parent: "3", name: "Peppo", source: "cat4.png" }, { key: "5", parent: "3", name: "Alonzo", source: "cat5.png" }, { key: "6", parent: "2", name: "Berlioz", source: "cat6.png" } ] }; Which is then imported in a service and "observed"
import { Injectable } from '@angular/core'; import { WORKFLOW_DATA } from './../mock-data/workflow' import {Observable} from "rxjs"; @Injectable() export class ApiService { constructor() { } getWorkflowForEditor(): Observable<Object> { return Observable.of( WORKFLOW_DATA ); } } I then have a component which, in the constructor:
constructor( private apiService: ApiService) { this.apiService.getWorkflowForEditor().subscribe( WORKFLOW_DATA => { console.log( WORKFLOW_DATA); console.log( WORKFLOW_DATA.testDataArray ); } ); } The first console.log logs an Object of type Object which contains the testDataArray property.
The second console.log, results in an error at compile time:
Property 'testDataArray' does not exist on type 'Object'. While still logging an array of objects [Object, Object, ..] as intended.
I really do not understand why, I am sure I am doing something wrong, I would love an explanation.
Thank you for any help!