A continuación se muestra el código, también probé async/await pero no funciona como se esperaba, siempre obtengo valores indefinidos en this.totalTwoChartData en la función getCharts()? Podría esperar un valor nulo pero no indefinido. ¿Debería cubrir todo en una sola función? o la promesa es la mejor manera? ¿Cuál es la mejor práctica para escribir el código limpio y manejar este tipo de situaciones?
ngOnInit(): void { this.getAllChartData() } // Get all chart data getAllChartData() { // Do not call server api if callStartDate / callEndDates is null if (this.calStartDate !== null && this.calEndDate !== null) { this.getOneChartData(); this.getTwoChartData(); this.getThreeChartData(); this.getCharts(); } } // One chart data getOneChartData() { this.oneChartSubscription = this.chartService .getOneChartService(this.calStartDate, this.calEndDate) .pipe(filter((res) => res !== null)) .subscribe((response) => { this.totalOneChartData = response.data }) } // Two chart data async getTwoChartData() { this.twoChartSubscription = this.chartService .getTwoChartService(this.calStartDate, this.calEndDate) .pipe(filter((res) => res !== null)) .subscribe((response) => { this.totalTwoChartData = response.data }) } // Three chart data getThreeChartData() { this.threeChartSubscription = this.chartService .getThreeChartService(this.calStartDate, this.calEndDate) .pipe(filter((res) => res !== null)) .subscribe((response) => { this.totalThreeChartData = response.data }) } async getCharts() { // Load Two chart data if (await this.totalTwoChartData !== null) { var objOneChart = await this.totalOneChartData; this.arrOneName = Object.keys(objOneChart).map((k) => { return objOneChart[k]['Name']; }); this.arrOneAmt = Object.keys(objOneChart).map((k) => { return parseFloat(objOneChart[k]['receivedAmount']); })....Este es un caso de uso para la función forkJoin (o combineLatest o zip según el caso de uso) para activar todos los observables en paralelo y continuar cuando se hayan emitido.
Vea aquí para más información.
Si vuelve a intentar usar las variables this.arrOneName y this.arrOneAmt sincrónicamente en otro lugar del controlador (archivo *.ts), entonces, esencialmente, deberá mover la suscripción a ese lugar. Como regla general, suscríbase a los observables donde se necesitan sus emisiones.
getCharts() { forkJoin({ oneChartData: this.chartService.getOneChartService(this.calStartDate, this.calEndDate).pipe(filter(res => !!res)), twoChartData: this.chartService.getTwoChartService(this.calStartDate, this.calEndDate).pipe(filter(res => !!res)), threeChartData: this.chartService.getThreeChartService(this.calStartDate, this.calEndDate).pipe(filter(res => !!res)), }).subscribe({ next: (data: any) => { this.arrOneName = Object.keys(data.oneChartData).map((k) => objOneChart[k]['Name']); this.arrOneAmt = Object.keys(data.oneChartData).map((k) => parseFloat(objOneChart[k]['receivedAmount'])); }, error: (error: any) => { // handle error } }); }