As I work on a school project, I've encountered a hurdle due to my lack of experience with Angular. My left-nav component includes multiple checkbox selections, and upon a user selecting one, an API call is made to retrieve all values for a specific "key" from our data store.
this.dataService.getData(key);
Subsequently, another component listens for the fetched data to generate a graph. However, despite successfully retrieving a JSON response from the API call through the data service, I'm struggling to pass this data/object to the time-graph component.
private segResponse$: Observable<SegmentResponse>;
@Output() dataRetrieved: EventEmitter<Observable<SegmentResponse>> = new EventEmitter();
...
getData(key: string) {
this.segResponse$ = this.httpClient.get<SegmentResponse>(this.baseUrl + key);
console.log('seg resp in service ' + this.segResponse$);
this.dataRetrieved.next(this.segResponse$);
}
While I can view the console response without issue, the SegmentResponse object appears as undefined within the time-graph component. "state" is simply one of the properties (string) of SegmentResponse.
ngOnInit() {
this.dataService.dataRetrieved.subscribe( data => {
this.segResponse = data;
console.log('time graph got data ' + this.segResponse.state);
});
}
Why does this discrepancy exist initially? What steps should be taken to successfully transfer the SegmentResponse from the data service to the time-graph component? It seems that the .next method doesn't await the successful return of the httpClient.get function. Unfortunately, given my limited familiarity with Angular and search capabilities, I struggle to pinpoint the precise solution.