typescript - hacer - ¿Cómo crear un Observable a partir de datos estáticos similares a http one en Angular?

rxjs

Question

Estoy teniendo un servicio que tiene este método:

export class TestModelService {

    public testModel: TestModel;

    constructor( @Inject(Http) public http: Http) {
    }

    public fetchModel(uuid: string = undefined): Observable<string> {
        if(!uuid) {
            //return Observable of JSON.stringify(new TestModel());
        }
        else {
            return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
                .map(res => res.text());
        }
    }
}

en el constructor del componente me estoy suscribiendo así:

export class MyComponent {
   testModel: TestModel;
   testModelService: TestModelService;

   constructor(@Inject(TestModelService) testModelService) {
      this.testModelService = testModelService;

      testService.fetchModel("29f4fddc-155a-4f26-9db6-5a431ecd5d44").subscribe(
          data => { this.testModel = FactModel.fromJson(JSON.parse(data)); },
          err => console.log(err)
      );
   }
}

Esto funciona si un objeto proviene del servidor pero estoy tratando de crear un observable que funcione con la llamada subscribe() dada para una cadena estática (esto sucede cuando testModelService.fetchModel() no recibe un uuid), por lo que no hay problemas manejo en ambos casos.

Answer 1

A partir de julio de 2018 y el lanzamiento de RxJS 6 , la nueva forma de obtener un Observable de un valor es importar el operador de la siguiente manera:

import { of } from ''rxjs'';

y luego crea el observable a partir del valor, así:

of(someValue);

Tenga en cuenta que solía tener que hacer Observable.of(someValue) como en la respuesta actualmente aceptada. Hay un buen artículo sobre los otros cambios de RxJS 6 here .

Answer 2

Así es como puede crear un observable simple para datos estáticos.

let observable = Observable.create(observer => {
  setTimeout(() => {
    let users = [
      {username:"balwant.padwal",city:"pune"},
      {username:"test",city:"mumbai"}]

    observer.next(users); // This method same as resolve() method from Angular 1
    console.log("am done");
    observer.complete();//to show we are done with our processing
    // observer.error(new Error("error message"));
  }, 2000);

})

to subscribe to it is very easy

observable.subscribe((data)=>{
  console.log(data); // users array display
});

Espero que esta respuesta sea útil. Podemos usar llamadas HTTP en lugar de datos estáticos.

Answer 3

De esta manera puede crear Observable a partir de datos, en mi caso necesito mantener el carrito de compras:

service.ts

export class OrderService {
    cartItems: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
    cartItems$ = this.cartItems.asObservable();

    // I need to maintain cart, so add items in cart

    addCartData(data) {
        const currentValue = this.cartItems.value; // get current items in cart
        const updatedValue = [...currentValue, data]; // push new item in cart

        if(updatedValue.length) {
          this.cartItems.next(updatedValue); // notify to all subscribers
        }
      }
}

Component.ts

export class CartViewComponent implements OnInit {
    cartProductList: any = [];
    constructor(
        private order: OrderService
    ) { }

    ngOnInit() {
        this.order.cartItems$.subscribe(items => {
            this.cartProductList = items;
        });
    }
}

Answer 4

Las cosas parecen haber cambiado desde Angular 2.0.0

import { Observable } from ''rxjs/Observable'';
import { Subscriber } from ''rxjs/Subscriber'';
// ...
public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return new Observable<TestModel>((subscriber: Subscriber<TestModel>) => subscriber.next(new TestModel())).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}

Se .next() función .next() en su suscriptor.

Answer 5

Tal vez podría intentar usar el método of de la clase Observable :

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

public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return Observable.of(new TestModel()).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}