As an Angular newbie, I am working on a project that involves accessing data from Firebase using an Angular service. My goal is to retrieve this data, store it in an array, and then perform some operations on that array. However, due to my limited experience with Angular, I'm unsure about the best way to achieve this. I understand that subscribe() is asynchronous and will require careful handling in order for my functions to work correctly.
graph.component.ts
import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import { EscortService } from '../services/escort/escort.service';
import { Escort } from '../data/escort.data';
import * as d3 from 'd3';
@Component({
selector: 'app-graph',
templateUrl: './graph.component.html',
styleUrls: ['./graph.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class GraphComponent implements OnInit {
escortList : Escort[] = [];
constructor(private escortService : EscortService, private element: ElementRef){
}
ngOnInit(){
this.getData();
this.generateBarChart();
}
getData(){
var esc = this.escortService.getData();
esc.snapshotChanges().subscribe(item => {
this.escortList = [];
item.forEach(element => {
var y = element.payload.toJSON();
y["$key"] = element.key;
var currentEscort = (y as Escort);
if(currentEscort.status == 'Completed'){
console.log("escort-list -> ngOnInit() : currentEscort.status = " + currentEscort.status);
this.escortList.push(currentEscort);
}
});
});
}