Javascript 处理管道和订阅firebase查询对象的类似方法是什么？

我有一个Angular服务，它使用以下方法从Firebase获取数据：

getMatchesFiltered(matchId: string, filter: string, sortDirection: string, pageIndex: number, pageSize: number){
    return this.db.object('/matches');
  }

它返回我可以应用

管道

和

订阅

的firebase可观测值，例如

this.dbService.getMatchesFiltered(matchId, filter, sortDirection, pageIndex, pageSize).pipe(
                    catchError(()=> of([])),
                    finalize(()=>this.loadingMatches.next(false))
                  )
                  .subscribe(matches => {
                    let results = [];
                    let json_data = matches;
                    for(var i in json_data){
                      if(json_data[i].matchDeets){
                        results.push([i, json_data[i].matchDeets][1]);
                      }
                    }
                    this.matchesSubject.next(results);
                  });

但是，当我尝试从数据库服务返回查询时，返回的对象不再是可观察的：

getMatchesFiltered(matchId: string, filter: string, sortDirection: string, pageIndex: number, pageSize: number){
    let ref = firebase.database().ref("/matches");
    return ref.limitToFirst(pageSize);
  }

Observable.create(function(observer) {
    ref.orderByKey().endAt("pterodactyl").on("child_added", snapshot => 
    {
        observer.next(snapshot.key);
    });
};

src/app/matchDataSource.model.ts（29106）中出错：错误TS2339:类型“Query”上不存在属性“pipe”

关于如何以类似于可观测数据的方式处理查询，文档似乎并不十分详尽

例如，我可以在收到数据快照后做一些事情：

ref.orderByKey().endAt("pterodactyl").on("child_added", function(snapshot) {
  console.log(snapshot.key);
});

但这是否意味着我必须添加

.on（“child_added”，function（snapshot）{}）我的组件中的一部分，而不是将其很好地包装在服务中

因此，我想我有以下问题：

我不知道如何正确地划分/封装这个

如果必须使用component.ts文件中的查询，我不知道如何处理pipe命令正在执行的操作

我不知道我是否缺少了一些简单直接的方法，使查询的行为类似于一个可观察对象

如果需要，乐意提供github的工作示例。
Woudn；难道不可能把它放在一个可观察的位置：

getMatchesFiltered(matchId: string, filter: string, sortDirection: string, pageIndex: number, pageSize: number){
    let ref = firebase.database().ref("/matches");
    return ref.limitToFirst(pageSize);
  }

Observable.create(function(observer) {
    ref.orderByKey().endAt("pterodactyl").on("child_added", snapshot => 
    {
        observer.next(snapshot.key);
    });
};

你想过用包装纸吗？@PierreDuc我想过。我认为这是一个伟大的线索。但是，I get FirebaseListFactoryOps错误类似于：看起来我可以通过将angularfire2更新为v.5.x.x来修复。然而，当我运行npm过时时，我的项目中angularfire2想要的版本似乎是4.0.0-rc0。我正在考虑发布第二个问题来解决这个问题。想要的版本是您的
包.json
中声明的版本。如果您运行
npmiangularfire2@latest
，它也应该更新package.json。如果不想使用angularfire，可以编写自己的包装器