web-dev-qa-db-fra.com

Comment créer un observable à partir de données statiques similaire à http one dans Angular?

Je vais avoir un service qui a cette méthode:

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());
        }
    }
}

dans le constructeur du composant, je m'abonne comme ceci:

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)
      );
   }
}

Cela fonctionne si un objet provient du serveur mais j'essaie de créer un observable qui fonctionnera avec l'appel subscribe() donné pour une chaîne statique (cela se produit lorsque testModelService.fetchModel() ne reçoit pas d'uuid). est une manipulation transparente dans les deux cas.

typescriptpromiseangularobservablerxjs
87
Michail Michailidis

Peut-être que vous pourriez essayer d'utiliser la méthode of de la classe 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());
  }
}
124
Thierry Templier

Depuis juillet 2018 et la sortie de RxJS 6, le nouveau moyen d'obtenir un observable à partir d'une valeur consiste à importer l'opérateur of comme suit:

import { of } from 'rxjs';

puis créez l'observable à partir de la valeur, comme suit:

of(someValue);

Notez que vous aviez l'habitude de faire Observable.of(someValue) comme dans la réponse actuellement acceptée. Il y a un bon article sur les autres modifications de RxJS 6 ici .

35
VSO

Les choses semblent avoir changé depuis 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());
  }
}

La fonction .next() sera appelée sur votre abonné.

17
Niel de Wet

Voici comment vous pouvez créer une simple observable pour des données statiques.

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
});

J'espère que cette réponse est utile. Nous pouvons utiliser l'appel HTTP à la place des données statiques.

9
Balwant Padwal

De cette façon, vous pouvez créer Observable à partir de données. Dans mon cas, je dois gérer mon panier:

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;
        });
    }
}
1
Rahul Dadhich