这个使用 Angularfire2 从 Firebase 数据库中检索列表的示例到底是如何工作的？

Question

我对 JavaScript\TypeScript 不是很感兴趣，而且我有一些问题无法理解这个示例在 Angular 应用程序中用于从 Firebase 数据库检索数据的具体工作原理。它工作正常，但我对它的逻辑有些怀疑（我认为它应该与函数式编程范式有关，我不太喜欢这个话题）。

所以我有这段使用 Angularfire2 库的代码（新的 ^5.0.0-rc.4版本）来查询我的 Firebase 数据库：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

   courses$: Observable<{}[]>;

    constructor(private db: AngularFireDatabase) {
        console.log("TEST");

        this.courses$ = db.list('courses').snapshotChanges()
            .map(actions => {
                return actions.map(action => ({
                    $key: action.key,
                    value: action.payload.val(),
                }))
            });

        this.courses$.subscribe(console.log);
    }

}

所以 courses$ 变量应该是 Observable 的数组（正确吗？）。据我所知，Observable 是一个发出可以订阅的事件的对象。它将包含从 Firebase 数据库中检索到的列表。

这段代码：

db.list('courses')

应该简单地将与 courses 节点的绑定作为列表创建到我的 Firebase 数据库（它本身包含一个节点列表）中。但是我不太确定我的解释是否正确或者我是否遗漏了什么。

然后在这个绑定上调用 snapshotChanges()，应该 return 一个 Observable。

这里我有以下疑惑：

此 Observable 与我正在检索的课程列表中的单个元素相关，还是与从 DB 检索的整个课程列表相关？（我认为是第二个，但我不太确定）。
由 snapshotChanges() 方法编辑的确切类型 return 似乎是 Observable<SnapshotAction[]>。那么具体是什么意思。它是一个 Observable，类型为 SnapshotAction 的数组。究竟是什么，究竟是什么意思？

然后就是这个map()函数：

.map(actions => {
    return actions.map(action => ({
        $key: action.key,
        value: action.payload.val(),
    }))
});

我在这里被困住了...我认为这是功能更强大的部分。我认为它曾经在每次观察到的东西发生变化时创建我的输出 courses$.

阅读文档，似乎 map() 方法创建了一个新数组（实际上我正在创建一个数组），结果是对该数组中的每个元素调用提供的函数。

所以应该是说这是对数组的每个元素调用的函数：

actions => {
    return actions.map(action => ({
        $key: action.key,
        value: action.payload.val(),
    }))
}

但是什么数组？我觉得应该是之前的Observable<SnapshotAction[]>returned by snapshotChanges()方法

我完全不确定这个说法....

所以我的想法是，每当订阅的 courses$ observable 发生变化时， map() 方法就会在新数据上执行......但我认为我错过了很多中间材料

这究竟是如何工作的？

Answer 1

观察者订阅了 Observable。然后该观察者对 Observable 发出的任何项目或项目序列做出反应。这种模式有利于并发操作，因为它不需要在等待 Observable 发出对象时阻塞，而是以观察者的形式创建一个哨兵，随时准备在 [= 的任何未来时间做出适当的反应。 10=] 这样做了。

Answer 2

根据to the documentation、

AngularFire provides methods that stream data back as redux compatible actions.

和 snapshotChanges 特别是：

Returns an Observable of data as a synchronized array of AngularFireAction[].

所以这个方法 returns 数据库操作数组的可观察值。

关于map函数，这里

return actions.map(action => ({
    $key: action.key,
    value: action.payload.val(),
}))

该示例只是遍历操作数组并从 action.payload.val() 中检索与每个操作关联的数据。 map 这里不是可观察运算符，它是数组上的方法。

这个使用 Angularfire2 从 Firebase 数据库中检索列表的示例到底是如何工作的？

How exactly works this example that use Angularfire2 to retrieve a list from a Firebase DB?

typescript

firebase-realtime-database

angularfire2

angular

angularfire5