Pierdo el valor de una variable suscrita a un observable en Angular

Question

No soy capaz de reutilizar el valor de una variable suscrita a un observable dentro de mi componente

Tengo esto

proyecto: Proyecto;

constructor(
    private route: ActivatedRoute,
    private service: ProyectoService
) { }

ngOnInit(): void {
  this.route.params.subscribe(params => {
  const id = params['id'];
  this.service.getDatosProyectoCabecera(id)
     .subscribe(
       (data: Proyecto) => this.proyecto = data,
       (err: any) => console.log(err),
       () => console.log('Recogidos los datos del proyecto para la cabecera')
  );
  console.log(this.proyecto);
}

y console.log me imprime "undefined" cuando dentro del método subscribe obtiene perfectaente su vaor

¿Cómo puedo usar el valor de esta variable en lineas de código posteriores a la suscripcion para otros temas entonces?

Un saludo

score -1 · Answer 1 · answered Dec 01 '20 at 18:48

-1

No estás perdiendo el dato, simplemente estas imprimiendo algo sin antes asignarle el valor, cambia tu código de la siguiente forma:

           this.service.getDatosProyectoCabecera(id).subscribe((data: Proyecto) => {
               this.proyecto = data
               console.log(this.proyecto);
           }, (err: any) => console.log(err),
           () => console.log('Recogidos los datos del proyecto para la cabecera'));

answered Dec 01 '20 at 18:48

Alberto Rojas

906
3
14
24

Falso, si está asignando el valor. Pero cuando llega, no antes. Es cierto que se suscribe al observable antes de imprimirlo, pero eso no garantiza que vaya a ejecutarse en ese orden, pues los observables son *asíncronos* así que lo que en realidad está pasando es que está imprimiendo la variable **ANTES** de la asignación, pero **la asignación la hace**. – Benito-B Dec 01 '20 at 18:57
Entiendo que segun se ejecuta el método suscribe el código salta inmediatamente a la siguiente instrucción que es el console.log pero como asincronaente aun no se ha obtenido el vaor por eso imprime undefined. Con lo cual entiendo que solo dentro del primer suscribe puedo usar el valor devuelto ya sea en el mismo o anidando suscripciones no? – kintela Dec 02 '20 at 11:10
Nunca "anides" subscripciones, es un antipattern muy jodido de debuggar luego. Qué necesitas de esa variable? Si solo vas a mostrarla en pantalla, te vasta con bindearla en el html, angular se encargará de actualizar la vista con los cambios de la variable. Si quieres usarla para algo, en el subscribe puedes pasar una callback a una función que haga todo lo que necesites... Si lo que necesitas es sacar más cosas asíncronas, te recomiendo que utilices combineLatest, zip o si necesitas sacar cosas en función de su valor, un flatMap te permite subscribirte a otra cosa sin anidar nada – Benito-B Dec 05 '20 at 10:40

Pierdo el valor de una variable suscrita a un observable en Angular

1 Answers1