Recently delving into Angular2, I encountered a perplexing issue.
I created some mock data like so:
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" }
]
};
This data 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 );
}
}
In the component's constructor:
constructor( private apiService: ApiService)
{
this.apiService.getWorkflowForEditor().subscribe( WORKFLOW_DATA => {
console.log( WORKFLOW_DATA);
console.log( WORKFLOW_DATA.testDataArray );
} );
}
The first console.log displays an Object containing the testDataArray property.
However, the second console.log throws a compile time error:
Property 'testDataArray' does not exist on type 'Object'.
Despite still logging an array of objects [Object, Object, ..] as expected.
I am baffled by this behavior and seek clarification on any mistakes I may have made.
Your insights are greatly appreciated!