web-dev-qa-db-ja.com

RxJはオブザーバブルから値を取得します

コンポーネント内：

singleEvent$: Observable<Event>;

初期化時に、観測可能になります

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のような現在の値を取得するにはどうすればよいですか？

typescriptangularrxjsobservable
21
SuperOrange

オブザーバブルからデータを取得するには、サブスクライブする必要があります：

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

テンプレートでは、 async pipe を使用してオブザーバブルに直接バインドできます。

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

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