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

【问题标题】：How exactly works this example that use Angularfire2 to retrieve a list from a Firebase DB?这个使用 Angularfire2 从 Firebase 数据库中检索列表的示例究竟是如何工作的？
【发布时间】：2018-04-16 21:19:23
【问题描述】：

我对 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 检索到的列表。

这段代码：

db.list('courses')

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

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

这里我有以下疑惑：

此Observable 与我正在检索的课程列表中的单个元素相关，还是与从数据库中检索到的整个课程列表相关？（我认为是第二个，但我不太确定）。
snapshotChanges() 方法返回的确切类型似乎是 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(),
    }))
}

但是什么数组？我认为应该是snapshotChanges()方法返回的之前的Observable<SnapshotAction[]>。

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

所以想法是，每次订阅的 courses$ observable 发生更改时，map() 方法都会在新数据上执行......但我认为我错过了很多中间的东西

这究竟是如何工作的？

【问题讨论】：

你在哪里看到的那个例子？

标签： angular typescript firebase-realtime-database angularfire2 angularfire5

【解决方案1】：

根据to the documentation，

AngularFire 提供了将数据流回为 redux 兼容的方法行动。

特别是snapshotChanges：

返回一个 Observable 数据作为一个同步数组 AngularFireAction[].

所以这个方法返回一个可观察的 DB 动作数组。

关于map函数，这里

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

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

【讨论】：

【解决方案2】：

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

【讨论】：