通过 Firebase 在 Angular 中使用 Observable 和订阅答案

【问题标题】：Using Observable and Subscribe in Angular with Firebase通过 Firebase 在 Angular 中使用 Observable 和订阅
【发布时间】：2018-05-23 18:00:09
【问题描述】：

我正在尝试订阅一个返回 angular 2 中可观察对象的函数。所以当有任何新的工人添加时，主调用函数应该有值

//基于firebase DB的功能

getWorkers():Observable<any> {
    firebase.database().ref('/workers').on('child_added', (snapshot) => {
        return snapshot.val();

    });

}

订阅功能

workers: any[];
public ngOnInit() {
    this.db.getWorkers().subscribe(workers => this.workers = workers);
}

这是说函数返回类型不是 Observable 并因此抛出错误。

【问题讨论】：

不应该返回值吗？喜欢return firebase.database()...。
你的意思是这样的：fbGetData() { return firebase.database().ref('/').on('child_added', (snapshot) => { return snapshot.val(); });}
我的意思是getWorkers 不会在您的原始代码中返回任何内容。
是的..那么如何让它返回一些东西？
你能把return放在firebase前面吗（就像你在上面评论中说的那样）？

标签： angular firebase

【解决方案1】：

firebase.database() 不返回 Observable，因此您无法返回它。
如果您按照下面的建议从回调函数中返回Observable.of(val)，它只会返回回调函数而不是外部getWorkers() 函数。

您需要根据回调返回的数据创建一个 observable。

我会使用 Observable.bindCallback：

getWorkers():Observable<any> {    
  let fn = firebase.database().ref('/workers').on('child_added', (snapshot) => {
        return snapshot.val();
  });

  return Observable.bindCallback(fn) as Observable<any>
}

那么您可以将其用作任何可观察对象：

this.getWorkers().subscribe(data=>{
    ...[code]...
})

这里有一些信息from the docs

【讨论】：

: Error : () => Observable' is notassignable to type 'Observable ，所以我尝试了 Observable.bind(fn) ，然后发现错误：“订阅是不是函数“
@HimanshuKhandelwal，试试看：return Observable.bindCallback(fn) as Observable<any>

【解决方案2】：

你的第一个方法必须返回 observable。

getWorkers():Observable<any> {
    firebase.database().ref('/workers').on('child_added', (snapshot) => {
        return Observable.of(snapshot.val());

    });
}

【讨论】：

Observable 仍然是红色的，“声明类型既不是 'void' 也不是 'any' 的函数必须返回一个值。”
这是错误的，因为“return”语句会返回内部函数（以(snapshot) =>{}开头的那个）
什么是变量firebase？
@Blunderchips import * as firebase from 'firebase';