1

he estado estudiando un poco sobre los Observables en Typescript, específicamente en Ionic 3, entiendo que para poder leer los datos de un Observable debo suscribirme a el, pero hasta ahora solo he podido usar los datos dentro del subscribe

import { DatabaseProvider from '../../providers/database/database'};
import { Observable } from 'rxjs/Observable';

export interface Data{id:string; name:string; dascription:string;}

export class HomePage{
private Datos: Observable<Data[]>:
datos: any[];

    constructor(private readonly database: DatabaseProvider){
        this.Datos= databse.getDocuments('items');
        this.Datos.subscribe(result => this.datos = result);
        console.log(this.Datos) // el resultado es undefined
    }
}

Sin embargo si creo un foreach() con la variable result y voy imprimiendo los valores dentro del subscribe si me aparecen los datos, alguna idea de como obtenerlos fuera del subscribe

7
  • Lo que sucede es que el observable se está ejecutando en un hilo paralelo. Cuado llegas a la línea: this.Datos.subscribe(result => this.datos = result); Efectivamente ahí se hace la suscripción, pero el programa no se pausa a esperar que el observable emita un valor, el programa simplemente continúa su ejecución y pasa a la siguiente instrucción console.log(this.Datos), en este punto todavía no hay una respuesta del observable y por eso no puedes leer los datos. La manipulación de los datos debes hacerla siempre dentro de la función que se pasó al observable.
    – Lobos
    el 9 feb. 2018 a las 16:13
  • entonces si dentro de la función del subscribe() mando llamar un método diferente y le mando como parámetros mis datos ahí si debería mostrármelos? algo así this.Datos.subscribe(result => { NewMetodo(valoresDentroDeUnArray) }); esto podría funcionar?? el 9 feb. 2018 a las 16:19
  • Sería así : this.Datos.subscribe(result => { this.NewMetodo(result); });
    – Lobos
    el 9 feb. 2018 a las 16:24
  • Ok intentare esto solo una duda mas, que tipo de dato debe ser el result, this.Datos.subscribe(result => { this.NewMetodo(result: ¿tipo? ); }); el 9 feb. 2018 a las 16:28
  • Pues no hace falta especificar un tipo de parámetro. El método podría ser así NewMetodo(result) { //hacer algo con result }
    – Lobos
    el 9 feb. 2018 a las 16:30

1 respuesta 1

2

Es que sólo podrás usarlos ahí dentro: Un observable devuelve datos de manera asíncrona, de manera parecida a una promesa. Cuando te subscribes simplemente le estás pasando la función a la que se llamará (en un futuro) cuando emita algo:

//defino cómo se procesarán los datos
function funcionObservadora (datos) {
   //proceso los datos recibidos, si se ejecuta este código
   //es porque se ha emitido algo.
}

//me subscribo al observable
miObservable.subscribe(funcionObservadora);
//el observable aún no ha emitido nada

Para que entiendas cómo manejar la asincronía: tu constructor lo que hace es declarar intenciones, son otros métodos los que tienen que realizar las acciones:

//versión muy simplificada de un Observable

class ObservableMock {
   constructor() {
     this.observers=[];
     this.interval=null;
     this.emitido=0;
   }
   
   subscribe(func) {
     this.observers.push(func);
     if (this.interval==null) {
       this.interval=setInterval(()=>this.emite(),1000);
     }
   }
   
   emite() {
   debugger;
     this.emitido++;
     this.observers.forEach(obs => obs("Emitiendo "+ this.emitido));
     if (this.emitido==5) clearInterval(this.interval);
   }
}

// versión muy simple de un observador: el que observa un observable
class Observador {
  constructor(mock) {
     //subscripción hecha aquí
     mock.subscribe(this.metodoObservador);
  }
  
  //aquí se gestionan los datos recibidos realmente
  metodoObservador(datos) {
    console.log("Recibiendo datos: ",datos);
  }
}

let mock= new ObservableMock();
new Observador(mock);

4
  • no entiendo como eso me ayuda con mi problema el 9 feb. 2018 a las 16:15
  • @RaulUrielAndradeSoto la respuesta de Pablo me parece bastante correcta y si ayuda en tu problema, ya que el problema esta en el mal entendido del funcionamiento del subscribe. Manejas el concepto de Promesas? el 9 feb. 2018 a las 16:18
  • no, tengo poco tiempo que retome el crear apps y apenas empece a toparme con estas clases, agradecería si me ayudaran a con un poco de explicación sobre como funcionan mas estas clases el 9 feb. 2018 a las 16:26
  • Te he actualizado la respuesta, a ver si te queda claro el 9 feb. 2018 a las 17:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.