Les RxJ tirent profit de l'observable

Question

En composant :

singleEvent$: Observable<Event>;

Sur init, j'obtiens 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;
  });

Comment puis-je prendre la valeur actuelle comme event.name ?

Answer 1

Pour obtenir des données d'un observable, vous devez vous abonner :

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

Dans le modèle, vous pouvez vous lier directement à des observables à l'aide de la fonction | async tuyau :

{{singleEvents$ | async}}

Answer 2

Pour compléter la réponse de Günter Zöbauer, un BehaviorSubject peut être ce que vous recherchez si vous cherchez à obtenir de manière synchrone la valeur à l'intérieur de votre Observable.

Un BehaviorSubject est un Observable qui a toujours une valeur, et vous pouvez appeler myBehaviorSubject.getValue() o myBehaviorSubject.value pour récupérer de manière synchrone la valeur que le BehaviorSubject détient actuellement.

Puisqu'il s'agit également d'un observable, vous pouvez toujours vous abonner au BehaviorSubject pour réagir de manière asynchrone aux changements de la valeur qu'il détient (par ex. myBehaviorSubject.subscribe(event => { this.event = event }) ) et utilisez le tube asynchrone dans le modèle de votre composant (ex. {{ myBehaviorSubject | async }} ).

Voici une utilisation correspondant à votre exemple pour créer un BehaviorSubject dans votre composant à partir du service donné :

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