Angular 角度/角度2-读取可观察到的文档并将数据保存到对象。没有异步管道

我已经在这个问题上纠缠了很长一段时间，我不知道如何用我想要的方法来解决它

基本上，我有一个名为

pages

的集合，其中包含所有页面文档。我对查询其中一个页面感兴趣。我想将其中一个文档作为可观察的对象来阅读，并使用NgModel指令实时更新数据。我想我已经解决了这一部分：我没有的是如何在不使用异步管道的情况下从firebase获取数据

当我订阅数据流时，我不会得到数据对象（我可以立即使用的值），而是可观察的（然后我必须使用

HTML

中的异步管道来查看它）。是否有一种方法可以订阅数据并用firebase中的数据填充某个对象（基本上做异步管道在组件HTML中所做的事情，但不使用异步管道？）

下面是从firebase获取数据的

页面.service.ts

逻辑：

  /**
   *
   * @param workspaceId
   * @param pageId
   * GET A PAGE AS AN OBSERVABLE
   * SNAPSHOT CHANGES ALLOWS THIS TO BE WRITTEN TO IN REAL TIME
   */
  getWorkspacePage(workspaceId: string, pageId: string) {
    return this.afAuth.authState.pipe(
      map((user) => {
        if (user) {
          return this.fs.doc$(
            `users/${user.uid}/workspaces/${workspaceId}/pages/${pageId}`
          );
        } else {
          return {};
        }
      })
    );
  }

下面是具体的功能，

doc$

：

  /**
   * GET THE DATA
   */
  doc$<T>(ref: DocumentPredicate<T>): Observable<T> {
    return this.doc(ref)
      .snapshotChanges()
      .pipe(
        map((doc) => {
          return doc.payload.data() as T;
        })
      );
  }

谢谢大家!

getWorkspacePage(workspaceId: string, pageId: string) {
    return this.afAuth.authState.pipe(
      map((user) => {
        if (user) {
          return this.fs.doc$(
            `users/${user.uid}/workspaces/${workspaceId}/pages/${pageId}`
          );
        } else {
          return {};
        }
      })
    );
  }

在这个方法中，使用了

map

，因此，

返回这个.fs.doc$…

，它是一个

可观察的

返回的对象，而不是您想要的对象

试着像这样使用

switchMap

：

getWorkspacePage(workspaceId: string, pageId: string) {
    return this.afAuth.authState.pipe(
      switchMap((user) => {
        if (user) {
          return this.fs.doc$(
            `users/${user.uid}/workspaces/${workspaceId}/pages/${pageId}`
          ); // return page data as Observable
        } else {
          return of({}); // return a blank object as the Observable
        }
      })
    );
  }

在这个方法中，使用了

map

，因此，

返回这个.fs.doc$…

，它是一个

可观察的

返回的对象，而不是您想要的对象

试着像这样使用

switchMap

：

getWorkspacePage(workspaceId: string, pageId: string) {
    return this.afAuth.authState.pipe(
      switchMap((user) => {
        if (user) {
          return this.fs.doc$(
            `users/${user.uid}/workspaces/${workspaceId}/pages/${pageId}`
          ); // return page data as Observable
        } else {
          return of({}); // return a blank object as the Observable
        }
      })
    );
  }

---

我不太确定问题出在哪里<订阅中的code>this.currentPage=pageData是一个对象，而不是一个可观察的对象（您甚至声明它是

页面

，而不是

可观察的

。

异步管道

本质上是在引擎盖下管理

订阅+取消订阅

。当I console.log pageData时，它给我的类型是可观察的。当我尝试访问该对象时，它告诉我它未定义。我声明它是

页面用于调试目的，但当它应该是页面数据时，它的行为就像
可观察的
。我不太确定问题是什么。
订阅中的
this.currentPage=pageData
是一个对象，而不是可观察的（您甚至声明它是
页面
，而不是
可观察的
。
异步管道
本质上是在引擎盖下管理
订阅+取消订阅
。当I console.log pageData时，它给我的类型是可观察的。当我尝试访问该对象时，它告诉我它未定义。我声明它是
页面用于调试，但当它应该是页面数据时，它的行为类似于
可观察的
。