这种用于从 Angular 应用程序查询 Firebase 的方法究竟是如何工作的？

Posted 2023-03-13

【中文标题】这种用于从 Angular 应用程序查询 Firebase 的方法究竟是如何工作的？

【英文标题】：How exactly works this method used to query Firebase from an Angular application?

【发布时间】：2020-10-01 07:08:01

【问题描述】：

我正在开发一个 Angular 项目，该项目通过 AngularFirestore 在 Udemy 的课程之后与 Firestore 数据库进行交互，我有以下疑问：

首先课程展示了这种方式来检索 Course 对象的数组，以这种方式：

  ngOnInit() 
    this.db.collection('courses').snapshotChanges()
      .subscribe(snaps => 
        const courses: Course[] = snaps.map(snap => 
          return <Course> 
            id: snap.payload.doc.id,
            ...snap.payload.doc.data() as Course
           as Course;
        )

        console.log(courses);

      );
  

所以根据我的理解，它是这样工作的：

在组件初始化中，它调用 AngularFirestore 对象（名为 db）上的 snapshotChanges() 方法来获取课程 Firebase 集合。此方法返回一个 Observable，当集合的元素发生变化时，我可以订阅它以获取整个集合。因此，当 Firebase 中的元素更改时，它会检索一组快照。我使用 ma​​p() 运算符迭代每个 snapthsoet 元素，使用其内容创建并返回一个新的 Course 对象，该对象将插入到最终的 课程：课程[]数组。

推理正确吗？如果我的理解是正确的，那么在课程的其他地方它以这种方式实现类似的行为：

 ngOnInit() 

    // Retrieve document sapshot, return all the courses with IDs:
    this.courses$ = this.db.collection('courses').snapshotChanges()
      .pipe(map(snaps => 
        return snaps.map(snap => 
          return <Course> 
            id: snap.payload.doc.id,
            ...snap.payload.doc.data() as Course
          
        );
      ));
   

在这里我发现了一些问题来理解它是如何工作的。

它总是检索 coures Firebase 集合的快照，而不是订阅返回的 Observable 对象，它使用 pipe()。在这种情况下 pipe() 究竟是什么？

然后在我看来，它正在对检索到的快照集合进行迭代（如前一个示例中所做的那样），但随后使用单个快照元素来构建它正在使用的 Course 对象ma​​p 第二次在这个 snaps 参数上（应该包含快照列表）

为什么？我错过了什么？

【问题讨论】：

pipe 是 observable 上的一种方法，它允许链接各种 rxjs 运算符。 pipe 表示您可以链接各种运算符，例如（map [它与 JS 的 array.map 不同]、mergeMap 或许多其他运算符）以根据应用程序需要处理数据。这是 oof rxjs 的基础。另一方面，subscribe 方法，它调用负责可观察对象的函数。我强烈推荐观看youtube.com/watch?v=E3Eego8xKdk 和youtube.com/watch?v=3LKMwkuK0ZE

【参考方案1】：

在第一个示例中，您有一个 Obaervable，this.db.collection('courses').snapshotChanges()，您只需订阅它。

订阅意味着您激活 Observable，并且从您订阅的那一刻起，您作为参数传入subscribe 方法的函数将被任意调用Observable 通知某事的时间。

在第二个示例中，您将变量 this.courses$ 设置为一个 Observable，它是

this.db.collection('courses').snapshotChanges()
      .pipe(map(snaps => 
        return snaps.map(snap => 
          return <Course> 
            id: snap.payload.doc.id,
            ...snap.payload.doc.data() as Course
          
        );
      ));

在这种情况下，源 Observable 仍然是 this.db.collection('courses').snapshotChanges()。使用pipe，您可以指定对源 Observable 的转换链。在这里，链很简单，您只需应用一个map 运算符。 map 运算符使用作为参数传入的函数转换源 Observable 通知的任何数据。结果是存储在变量 this.courses$ 中的 Observable 将在源 Observable 通知新快照时发出一个 Courses 数组。

您必须注意到，在第二个示例中，在有人订阅存储在变量 this.courses$ 中的 Observable 之前，什么都不会发生。