web-dev-qa-db-de.com

RxJs erhalten den Wert von Observable

In der Komponente:

singleEvent$: Observable<Event>;

Auf Init bekomme ich beobachtbar

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

Wie kann ich den aktuellen Wert wie event.name?

21
SuperOrange

Um Daten von einem Observable zu erhalten, müssen Sie Folgendes abonnieren:

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

In der Vorlage können Sie mit der asynchronen Pipe direkt an Observables binden:

{{singleEvents$ | async}}
37

Um die Antwort von Günter Zöbauer zu ergänzen, ist ein BehaviorSubject möglicherweise das, wonach Sie suchen, wenn Sie den Wert synchron in Ihrem Observable abrufen möchten.

Ein BehaviorSubject ist eine Observable, die immer einen Wert hat, und Sie können myBehaviorSubject.getValue() oder myBehaviorSubject.value Aufrufen, um synchron den Wert abzurufen, den das BehaviorSubject derzeit enthält.

Da es sich ebenfalls um ein Observable handelt, können Sie das BehaviorSubject abonnieren, um asynchron auf Änderungen des enthaltenen Werts zu reagieren (z. B. myBehaviorSubject.subscribe(event => { this.event = event })) und die asynchrone Pipe in der Vorlage Ihrer Komponente zu verwenden (z. B. {{ myBehaviorSubject | async }}).

Hier ist eine Verwendung, die Ihrem angegebenen Beispiel entspricht, um aus dem angegebenen Service ein BehaviorSubject in Ihrer Komponente zu erstellen:

@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);
        }
      });
  }
}
5
ZackDeRose