typescript - node_modules - RxJs obtiene valor de observable

rxjs angular 7

Question

En componente:

singleEvent$: Observable<Event>;

En init, me pongo 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;
});

¿Cómo puedo tomar el valor actual como event.name ?

Answer 1

Para agregar a la respuesta de Günter Zöbauer, un BehaviorSubject puede ser lo que está buscando si está buscando obtener el valor dentro de su Observable de forma sincrónica.

Un BehaviorSubject es un Observable que siempre tiene un valor, y puede llamar a myBehaviorSubject.getValue() o myBehaviorSubject.value para recuperar sincrónicamente el valor que BehaviorSubject tiene actualmente.

Ya que también es un observable, aún puede suscribirse a BehaviorSubject para reaccionar de forma asíncrona a los cambios en el valor que tiene (por ejemplo, myBehaviorSubject.subscribe(event => { this.event = event }) ) y usar la canalización async en la plantilla de su componente (por ejemplo, {{ myBehaviorSubject | async }} ).

Aquí hay algunos usos para que coincida con su ejemplo dado para crear un BehaviorSubject en su componente desde el servicio dado:

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

Answer 2

Para obtener datos de un observable, debe suscribirse:

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

En la plantilla puede enlazar directamente a los observables utilizando la | async tubería | async :

{{singleEvents$ | async}}