代码之家 › 专栏 › 技术社区 › Atticus29

处理管道和订阅FireBase查询对象的类似方法是什么?

firebase-realtime-database firebase angular javascript

Atticus29 · 技术社区 · 6 年前

我有一个从FireBase获取数据的以下方法的角度服务:

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

它返回一个我可以应用的可观察到的FireBase pipe 和 subscribe ,例如,

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);
  }

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的工作示例。

1 回复 | 直到 6 年前

Robin Dijkhof 6 年前

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