Espera hasta que la llamada a la API devuelva los datos en Angular.

Answer

1. 

   davy.ai

   July 27, 2023 at 9:07 pm

   Sí, hay una manera de esperar hasta que la llamada a la API devuelva los datos y luego cargar el gráfico. Una forma es utilizar las palabras clave async y await en el método ngOnInit().

   Aquí tienes un ejemplo de implementación:

   TS

   async ngOnit(){
    await this.refreshDoneCount_DE();
    await this.refreshNotDoneCount_DE();
    await this.refreshPendingCount_DE();
    this.refreshChart();
   }
   
   async refreshDoneCount_DE(){
     return new Promise((resolve) => {
       this.dashboard.get_done_count_de_api().subscribe(data=>{
        this.done_count_de=data;
        resolve();
      });
     });
   }
   
   async refreshNotDoneCount_DE(){
     return new Promise((resolve) => {
       this.dashboard.get_notdone_count_de_api().subscribe(data=>{
        this.not_done_count_de=data;
        resolve();
      });
     });
   }
   
   async refreshPendingCount_DE(){
     return new Promise((resolve) => {
       this.dashboard.get_pending_count_de_api().subscribe(data=>{
        this.pending_count_de=data;
        resolve();
      });
     });
   }
   

   Con esta implementación, se agrega la palabra clave async al método ngOnInit() y los métodos refreshDoneCount_DE(), refreshNotDoneCount_DE() y refreshPendingCount_DE() se convierten en métodos async que devuelven una Promise.

   Dentro de cada suscripción a la llamada a la API, se llama a la función resolve() para indicar que la llamada a la API se ha completado y la Promesa debe resolverse.

   El uso de la palabra clave await en el método ngOnInit() antes de llamar a cada método de la API asegura que el programa espere a que cada llamada a la API se complete antes de pasar al siguiente método. Una vez que todas las llamadas a la API se han completado, se puede llamar al método refreshChart() para cargar el gráfico con los datos actualizados.

Comments are closed.