Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RxJs get value from observable

In component :

singleEvent$: Observable<Event>; 

On init, I get observable

this.singleEvent$ = this._eventService.events$   .map(function (events) {     let eventObject = events.find(item => item.id === eventid);     let eventClass: Event = new Event(eventObject);     return eventClass;   }); 

How can I take current value like event.name ?

like image 409
SuperOrange Avatar asked Jun 03 '16 06:06

SuperOrange


People also ask

How do you find the current value of an observable?

To get current value of RxJS Subject or Observable, we can use the first method. const observable = of("foo"); const hasValue = (value: any) => { return value !== null && value !== undefined; }; const getValue = <T>(observable: Observable<T>): Promise<T> => { return observable.

How do we get the value back from an observable in our component?

Observable values can be retrieved from any locations. The source sequence is first pushed onto a special observer that is able to emit elsewhere. This is achieved with the Subject class from the Reactive Extensions (RxJS). Store value onto the observer.

How do you get the last emitted value from observable?

Rather than a standard subject (Observable) that just emits values as they come in, a BehaviorSubject emits the last value upon subscribe() . You can also get the last value manually using the BehaviorSubjects getValue() method.


2 Answers

To get data from an observable, you need to subscribe:

this.singleEvents$.subscribe(event => this.event = event); 

In the template you can directly bind to observables using the async pipe:

{{singleEvents$ | async}} 
like image 62
Günter Zöchbauer Avatar answered Sep 21 '22 18:09

Günter Zöchbauer


To add on to Günter Zöbauer's answer, a BehaviorSubject may be what you are looking for if you're looking to synchronously get the value inside of your Observable.

A BehaviorSubject is an Observable that always has a value, and you can call myBehaviorSubject.getValue() or myBehaviorSubject.value to synchronously retrieve the value the BehaviorSubject currently holds.

Since it is itself an observable as well, you can still subscribe to the BehaviorSubject to asynchronously react to changes in the value that it holds (e.g. myBehaviorSubject.subscribe(event => { this.event = event })) and use the async pipe in your component's template (e.g. {{ myBehaviorSubject | async }}).

Here's some usage to match your given example to create a BehaviorSubject in your component from the given service:

@Component({   //... }) export class YourComponent implements OnInit {   singleEvent$: BehaviorSubject<Event>;    constructor(private eventService: EventService){}    ngOnInit(){     const eventid = 'id'; // <-- actual id could go here     this.eventService.events$       .pipe(         map(events => {           let eventObject = events.find(item => item.id === eventid);           let eventClass: Event = new Event(eventObject);           return eventClass;         })       )       .subscribe(event => {         if(!this.singleEvent$){           this.singleEvent$ = new BehaviorSubject(event);         } else {           this.singleEvent$.next(event);         }       });   } } 
like image 23
ZackDeRose Avatar answered Sep 22 '22 18:09

ZackDeRose