3

我不太喜欢 JavaScript\TypeScript，我有一些问题要理解这个示例在 Angular 应用程序中用于从 Firebase 数据库中检索数据的确切工作原理。它工作得很好，但我对它的逻辑有些怀疑（我认为它应该与函数式编程范式有关，我不太喜欢这个话题）。

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

@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.

在这里，我有以下疑问：

  1. 这Observable与我正在检索的课程列表中的单个元素有关，还是与从数据库中检索到的整个课程列表有关？（我认为是第二个，但我不太确定）。

  2. 该snapshotChanges()方法返回的确切类型似乎是Observable<SnapshotAction[]>. 那么究竟是什么意思。SnapshotAction它是一个具有as 类型数组的 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$observable发生变化时，都会map()在新数据上执行该方法......但我认为我错过了很多中间的东西

这究竟是如何工作的？

4

2 回答 2

3

根据文件，

AngularFire 提供了将数据作为与 redux 兼容的操作流回的方法。

特别snapshotChanges是：

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

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

关于map功能，这里

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

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

于 2018-01-04T12:11:01.483 回答
1

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

于 2018-01-04T11:31:17.690 回答