RxJ从可观察中获得价值

Question

在组件中:

singleEvent$: Observable<Event>;

在init,我得到了可观察性

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

我怎样才能获得当前价值event.name？

Answer 1

要从可观察的数据中获取数据,您需要订阅:

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

在模板中,您可以使用__CODE__管道直接绑定到observable :

{{singleEvents$ | async}}

Answer 2

要添加到GünterZöbauer的答案,如果您希望同步获取Observable中的值,可以使用BehaviorSubject.

BehaviorSubject是一个始终具有值的Observable,您可以调用myBehaviorSubject.getValue()或myBehaviorSubject.value同步检索BehaviorSubject当前持有的值.

由于它本身也是一个可观察的,你仍然可以订阅BehaviorSubject以异步地对它所拥有的值的变化作出反应(例如myBehaviorSubject.subscribe(event => { this.event = event }))并在组件的模板中使用异步管道(例如{{ myBehaviorSubject | async }}).

以下是与给定示例匹配的一些用法,用于在给定服务的组件中创建BehaviorSubject:

@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 3

您可以使用observable.pipe(take(1)).subscribe来限制 observable 仅获取一个值并停止侦听更多值。

let firstName: string; 

        this.insureFirstName
            .pipe(take(1))  //this will limit the observable to only one value
            .subscribe((firstName: string) => {
                this.firstName = firstName; asssgning value 
            });
        console.log(this.firstName); //accessing the value