Estoy tratando de hacer una barra de progreso en angular que funcione bien para mostrar el progreso de un método en backEnd que procesa un gran archivo de Excel.
Utilizo un observable @Sse que emite datos del método posterior al que llamo para procesar el archivo de Excel.
el método funciona bien, y la comunicación entre el frente con el sse observable también funciona.
El problema es que las respuestas del observable no están siendo procesadas por el frente hasta que finaliza el método en la parte posterior, porque su método se llama con una espera.
Vamos con el código porque no sé si me estoy explicando bien.
console.time('import en back'); const subscription = this.sseService .getServerSentEvent(environment.apiUrl + routesSse._pre + routesSse.getHippoImportProgress) .subscribe(async (a) => { const data = JSON.parse(a.data); console.log(data); this.currentRow = data.i; this.currentOperation = data.operacion; this.totalRows = data.total; this.progress = this.currentRow == 0 ? 0 : (this.currentRow / this.totalRows) * 100; this.cdr.detectChanges(); }); const importData = await this.worksSectionService.getImportExcelHippoWorksData(rowsToSend); console.timeEnd('import en back');La parte posterior genera bien los valores de este observable, porque lo he probado con console.logs
Pero los datos no se reflejan en la suscripción hasta que finaliza el método de retroceso.
los valores de este observable se generan dentro del método que se llama en la parte posterior.
... He intentado llamar tanto a la suscripción observable convertida en promesa como a la llamada al método en una Promesa. Todo, pero el resultado es el mismo...
EDITAR: si llamo al método:
this.worksSectionService.getImportExcelHippoWorksData(rowsToSend)sin la espera (solo para pruebas), como esta:
const subscription = this.sseService .getServerSentEvent(environment.apiUrl + routesSse._pre + routesSse.getHippoImportProgress) .subscribe(async (a) => { const data = JSON.parse(a.data); console.log(data); this.currentRow = data.i; this.currentOperation = data.operacion; this.totalRows = data.total; this.progress = this.currentRow == 0 ? 0 : (this.currentRow / this.totalRows) * 100; this.cdr.detectChanges(); }); this.worksSectionService.getImportExcelHippoWorksData(rowsToSend);, el comportamiento es el mismo