Búsqueda de sitios web

typescript - crear Observable<T> a partir del resultado


Estoy probando Angular2.

Noté que el servicio http usa un objeto Observable en lugar de Promise (no me gusta mucho esa elección... async/await están llegando).

En mi servicio, descargo una lista de Plantas desde el servicio web. Al hacer clic en una planta, muestro los detalles usando el enrutamiento. Pero de esta manera, cuando regreso, las plantas se descargan nuevamente (porque el constructor se llama de nuevo).

Para evitar esto quiero hacer algo como:

public getPlants(): Observable<Plants[]>
{   
    if (this._plants != null)
        return Observable.fromResult (this._plants); //This method does not exists 

    return this._http.get('../../res/heroes.json')...
}

¿Hay una manera de hacer eso? ¿Cómo puedo importar la clase Observable en mi archivo ts?

¡Gracias!

Respuesta #1

El método en TypeScript (o JavaScript, para el caso) se llama of. Learn rxjs también tiene un buen tutorial

Si estás usando rxjs6, obtienes todo de rxjs

import { Observable, of } from 'rxjs';

public getPlants(): Observable<Plant[]> {
  const mocked: Plant[] = [
    { id: 1, image: 'hello.png' }
  ];
  // returns an Observable that emits one value, mocked; which in this case is an array,
  // and then a complete notification
  // You can easily just add more arguments to emit a list of values instead
  return of(mocked);
}

En la versión anterior importaste el operador de desde una ubicación diferente

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

public getPlants(): Observable<Plant[]> {
  const mocked: Plant[] = [
    { id: 1, image: 'hello.png' }
  ];
  return of(mocked);
}

Y antes de eso lo importaste como una extensión para la clase Observable

import { Observable } from "rxjs/Observable";
import 'rxjs/add/observable/of';

public getPlants(): Observable<Plants[]> {
    // this can be changed to a member variable of course
    let mocked: Plants[] = [{
        id: 1,
        image: "hello.png"
    }];
    return Observable.of(mocked);
}

Respuesta #2

Esta es mi solución de trabajo:

if (this._heroes != null && this._heroes !== undefined) {
    return Observable.create(observer => {
        observer.next(this._heroes);
        observer.complete();
    });
}

Espero que esta sea la mejor solución.

Artículos relacionados