从Angular TypeScript中来自firestore的数据中获取未定义

Question

我想从名为 Events 的 firestore 集合中获取 eventID 的值。我可以在我的应用程序中获取并显示我的 Firestore 集合中的所有事件，但我需要这个 eventID 来完成其他功能。

我是 TS 和 Angular 的新手，不明白为什么这不起作用

当我在 auth 函数中记录我的 userid 变量时，它可以正常工作并检索值，但如果我在函数之外这样做，它会给出未定义的结果。

此外，当我记录我为存储来自 firestore 的信息而创建的整个 eventList 变量时，它会记录所有信息，但如果我尝试检索任何内容，例如 this.eventList.eventID 或 this.eventList.title，它会记录未定义的信息。

我做错了什么？

这是我的代码：

import { Component,OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';
import { async } from '@firebase/util';

export class Tab1Page implements OnInit {

  public eventList;
  public userid;
  constructor(private firestore: AngularFirestore, public fAuth: AuthService, public router: Router) {}

  ngOnInit(){

    this.fAuth.firebaseAuth.user.subscribe(res => {
      this.userid = res.uid; //current logged in user id

      //fetch only events logged in user created
      this.firestore.collection('Events',ref=>ref.where("eventCreator","==",this.userid)).valueChanges().subscribe(event => { 

        this.eventList = event

        console.log(this.eventList)//logs all the info from firestore
        console.log(this.eventList.eventID)//logs undefined
        console.log(this.userid)//logs the userid
      });
    });
    console.log(this.userid)//logs undefined
  }


}

Answer 1

作为console.log(this.userid) // logs undefined

@MikeOne 引用 subscribe 内部的函数是异步的。这些函数通常会在以后执行。所以在console.log(this.userid)//logs undefined被执行的时候，this.userid = res.uid;仍然没有被执行。

作为console.log(this.eventList.eventID) // logs undefined

我猜this.eventList 是数组。尝试this.eventList[0].eventID 等来访问每个元素。

Answer 2

要解决嵌套订阅时出现的undefined 数据响应问题，请使用RxJS switchMap() 运算符将外部可观察对象的结果从fAuth.firebaseAuth.user 可观察对象传递到内部可观察对象，即@987654326 @ observable，从那里你可以在一个订阅中从内部 observable 的流式响应中分配事件列表：

像这样（我不确定您的事件数据的结构 - 它是一个数组还是一个类/接口，它是一个包含数组的标头，所以我放置了一个 any 作为响应类型）：

this.fAuth.firebaseAuth.user
.pipe(
    switchMap((res: any) => {
        this.userid = res.uid; //current logged in user id

        //fetch only events logged in user created
        const eventListObservable: Observable<any> =                 
            this.firestore.collection('Events',ref => 
                ref.where("eventCreator","==",res.uid))
                .valueChanges()
                .pipe(
                    map((event: any) =>
                    {             
                        this.eventList = event;
 
                        console.log(event); //logs all the info from firestore
                        console.log(event.eventid); //logs event id
                        console.log(user.id); //logs the userid

                        return event;
                    })             
                 );
        return eventListObservable;
    })
)
.subscribe();

作为最佳实践，您可以将上述内容分配给 subscription，稍后在 ngDestroy() 处理程序中释放它。

遇到的一个常见问题是能够访问subscribe() 块之外的变量，并在this question 中提出。如果您尝试在subscribe() 块之外（和之后）访问组件的event 变量，则该变量在被访问时将为undefined，因为异步内部可观察对象的执行尚未完成，并且其中的代码尚未执行处理程序来初始化变量。

解决订阅块之外的变量访问问题的解决方法包括使用：

1. 组件的 HTML 模板中的 async pipe。 （转换 首先将变量转换为 Observable）。
2. 使用另一个RxJS方法如combinelatest()订阅 observables 同时处理并在它们都有结果时处理它们 从他们各自的 observables 中准备好。
3. 从 HTML 模板访问另一个事件处理程序中的变量。

要试验和测试上述嵌套的可观察对象，请先使用简单的模拟服务，然后将您的可观察对象附加到实时服务。

我推荐一个很好的参考网站here（我也经常使用），以进一步了解（和示例）以及更多关于如何在这些情况下使用 RxJS 以及 SO 中的其他帖子。