为什么将 AngularFire Observable 转换为数组如此复杂？

Question

我正在从 Firebase RTDB 调用数据，并且该数据位于 Observable 中。我在这里遇到的问题是，在我的 .TS 文件中，我想访问 Observable 的内容，这种想法似乎是不可能的。

我需要进入那里，以便我可以使用某些值来为组件编写一些逻辑，目前我唯一可以访问数据的地方是使用异步在 HTML 中。

所有东西都在 switchmap 中，因为我使用按钮单击来更改路线，因此我可以从数据库中的不同路径提取数据。

组件.TS

import { Component, OnChanges, OnInit, SimpleChanges, Inject } from '@angular/core';

import { AngularFireDatabase } from '@angular/fire/compat/database';
import { BehaviorSubject, Observable, switchMap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

  
})
export class AppComponent  {

// implements OnChanges, OnInit
  time$: Observable<any[]>;
  lineup$: Observable<any[]>;

  x$ = new BehaviorSubject<string>('race_no_1');
  
  constructor(private db: AngularFireDatabase) {
    // Get Lineups
    this.lineup$ = this.x$.pipe(switchMap((x) => {
      return this.db.list('race/'+x).valueChanges();
  }))

    // Get Race Events
      this.time$ = this.x$.pipe(switchMap((x$) => {
          return this.db.list(x$).valueChanges();
      }))
  }
  
  race_no(b: string) {
      this.x$.next(b);
  }
}

我希望从中得到一个常规的 TS 数组，这样我就可以使用数组中的值来处理组件逻辑。就像添加一个 json 返回数组一样。

我怎样才能快速简单地完成这件事？

Answer 1

我们有

rxjs/operators

来处理这个特定的场景。

• map

  -> 访问可观察中的数据，您可以通过返回转换后的值来转换响应

• tap

  -> 访问observable中的数据，不修改内部内容，而是根据observable的值执行

  side-actions

  ！

所以看起来

tap

就是您所需要的！

您的问题尚未详细说明您想要解决的问题，因此这里是它的外观的高水平！

  constructor(private db: AngularFireDatabase) {
    // Get Lineups
    this.lineup$ = this.x$.pipe(switchMap((x) => {
      return this.db.list('race/'+x).valueChanges().pipe(
          tap((obsData: any) => {
              // do something with the obs data!!!!
          })
      );
  }))