web-dev-qa-db-fra.com

Les RxJs tirent profit de l'observable

En composant:

singleEvent$: Observable<Event>;

Sur init, je deviens 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?

typescriptangularrxjsobservable
21
SuperOrange

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

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

Dans le modèle, vous pouvez directement lier des observables à l’aide du pipe async :

{{singleEvents$ | async}}
37
Günter Zöchbauer

Pour ajouter à la réponse de Günter Zöbauer, un objet BehaviorSubject peut être ce que vous recherchez si vous souhaitez obtenir la valeur de manière synchrone dans votre Observable.

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

Comme il est lui aussi observable, vous pouvez toujours vous abonner à BehaviorSubject pour réagir de manière asynchrone aux modifications de la valeur qu’il détient (par exemple, myBehaviorSubject.subscribe(event => { this.event = event })) et utiliser le canal asynchrone dans le modèle de votre composant (par exemple, {{ myBehaviorSubject | async }}).

Voici quelques exemples d'utilisation correspondant à votre exemple donné 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);
        }
      });
  }
}
5
ZackDeRose