Angularfire2从Firebase数据库获取列表的示例原理详解

嘿，我来帮你一步步拆解这段代码，把每个疑问都讲明白～

1. courses$是不是Observable数组？ #

完全没错！你看代码里的类型声明Observable<{}[]>，就明确了它是一个发射对象数组的Observable。而且你后面调用this.courses$.subscribe(console.log)，订阅后打印出来的结果就是处理好的数组，这也能直观证明它最终输出的是数组类型的数据。

2. db.list('courses')的具体作用 #

db是AngularFireDatabase的实例，调用db.list('courses')会创建一个AngularFireList对象，它专门对应Firebase实时数据库里名为courses的列表节点。这个对象封装了和该节点交互的所有方法（比如获取、添加、更新数据），简单说这一步就是告诉AngularFire：“我要操作数据库里的courses这个列表啦”。

3. snapshotChanges()返回的Observable<SnapshotAction[]>是什么 #

snapshotChanges()是AngularFireList提供的核心方法之一，它返回的Observable会实时监听courses节点的所有数据变化——不管是新增、修改还是删除数据，这个Observable都会立刻发射一组SnapshotAction对象（也就是SnapshotAction[]数组）。

每个SnapshotAction对象包含两个核心属性：

• key：对应Firebase数据库中这条数据的唯一标识（每条课程的ID）
• payload：包含这条数据的快照对象，调用payload.val()就能拿到这条数据的实际内容（比如课程名称、描述等字段）

所以Observable<SnapshotAction[]>的意思就是：这个Observable每次发射的，是一组包含了数据键和数据快照的对象数组。

4. 嵌套map函数的工作原理 #

这里有两层map，作用完全不同，分开来看就清楚了：

• 第一层map是Observable的操作符：它作用在snapshotChanges()返回的Observable流上，每当Observable发射SnapshotAction[]时，这个map就会把原始的快照数组转换成我们需要的格式。
• 第二层map是普通JavaScript数组的map方法：它遍历actions数组（也就是SnapshotAction[]），把每个SnapshotAction对象转换成一个新的自定义对象，包含$key（从action.key取）和value（从action.payload.val()取）。

举个实际例子，假设Firebase的courses节点数据是这样的：

{
  "course_abc": { "name": "Angular入门教程" },
  "course_def": { "name": "Firebase实战指南" }
}

那snapshotChanges()发射的actions数组大概长这样：

[
  { key: "course_abc", payload: { val: () => ({ name: "Angular入门教程" }) } },
  { key: "course_def", payload: { val: () => ({ name: "Firebase实战指南" }) } }
]

经过两层map转换后，就变成了我们更易用的格式：

[
  { $key: "course_abc", value: { name: "Angular入门教程" } },
  { $key: "course_def", value: { name: "Firebase实战指南" } }
]

这样在模板里用async管道绑定数据时，就能轻松拿到每条课程的ID和内容啦～

内容的提问来源于stack exchange，提问作者AndreaNobili