首页 文章

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

提问于
浏览 次
3

我不是很喜欢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 是一个发出可订阅事件的Object . 它将包含从Firebase DB检索的列表 .

此代码部分：

db.list('courses')

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

然后在这个绑定被称为 snapshotChanges() 应返回 Observable .

在这里，我有以下疑问：

  • 这 Observable 与我正在检索的课程列表中的单个元素有关，还与从DB中检索的整个课程列表有关？ （我想第二个但我不太确定） .

  • 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

2 回答

  • 2

    据to the documentation，

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

    和 snapshotChanges 特别是：

    将Observable数据作为AngularFireAction []的同步数组返回 .

    因此，此方法返回可观察的数据库操作数组 .

    关于 map 函数，这里

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

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

    回复于
  • 1

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

    回复于

相关问题