angular - 这个使用 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 创建绑定(bind)节点作为列表进入我的 Firebase 数据库(它本身包含一个节点列表)。但我不太确定我的解释是否正确，或者我是否遗漏了什么。

然后在这个绑定(bind)上称为 snapshotChanges()那应该返回 Observable .

这里我有以下疑惑:

1. 这Observable是与我正在检索的类(class)列表中的单个元素相关，还是与从数据库中检索到的整个类(class)列表相关？ (我认为是第二个，但我不太确定)。

2. snapshotChanges() 返回的确切类型方法似乎是Observable<SnapshotAction[]> .那么具体是什么意思。它是一个具有 SnapshotAction 数组的 Observable。作为类型。究竟是什么，究竟是什么意思？

然后就是这个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[]>由 snapshotChanges() 返回方法。

我完全不确定这个断言....

所以这个想法是每次订阅的 courses$ 发生变化时可观察到 map()方法在新数据上执行...但我认为我遗漏了很多中间内容

这究竟是如何工作的？

Answer 1

根据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[].

所以这个方法返回一个可观察的数据库操作数组。

关于map函数，这里

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

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