RxJs结合了Observables

时间:2016-09-25 21:55:51

标签: angular firebase-realtime-database rxjs observable angularfire2

我正在尝试解决问题,当我有两个Observable,我想在Angular2和Angularfire2中合并为单个值

让我想象一下,我有两种类型的银行账户和交易,传出和传入(它只是用于实践目的而创建的用例)。我想将它们加在一起以获得实际的账户余额。

模板:

....
 <div *ngFor="let account of accounts | async">
    {{ (transactionService.getAccountBalance(account) | async )?.balance }}
 </div
 ....

最后是应该提供数据的服务

    getAccountBalance(account){
    return Observable.zip(
        this.getIncomingTransactionsForAccount(account), // FirebaseListObservable
        this.getOutcomingTransactionsForAccount(account) // FirebaseListObservable
    , (incoming, outcoming) => {
            ....
            let result = {
                account: account.$key,
                balance: someCalculatedNumber
            };
            console.log(result); // result is correct there
            return result;
        }
    )

}

这会导致Firebase无限循环(并且不会在模板中显示数据)。我也尝试了Observer.merge()和其他一些人,但我认为我只是试图使用绝对错误的方法。

感谢任何帮助,谢谢!

修改

尝试了另一种解决方案,只使用一个流来计算所有传入的事务:

public getAllIncoming(account: IAccount){

    return this.getIncomingTransactionsForAccount(account)
        .scan((x, y) => {
            console.log(x, y);
            return 1;
        }, 0);
}

再次生成无限查询。

EDIT2

我也试过forkJoin

    public getAccount2Balance(account: IAccount) {

    return Observable.forkJoin([
            this.getIncomingTransactionsForAccount(account),
            this.getOutcomingTransactionsForAccount(account)
        ], (incoming, outcoming) => {
            ...
            let result = {
                account: account.$key,
                balance: someCalculatedNumber
            };
            console.log(result);
            return result;
        })
}

使用与上面相同的模板。结果: 值未显示在模板和console.log中,结果未打印

1 个答案:

答案 0 :(得分:0)

另一种选择是尝试combineLastest。以下假设您的传入和传出帐户调用返回FirebaseListObservable,并且您尝试将它们合并为一个列表(accounts)。

return Observable.combineLatest(

  // added .do() to make sure incoming is working
  this.getIncomingTransactionsForAccount(account)
    .do(x => console.log('incoming transactions', x),

  // added .do() to make sure outcoming is working
  this.getOutcomingTransactionsForAccount(account)
    .do(y => console.log('outcoming transactions', y),

  (incoming, outcoming) => {
    // ... do your calculations
    let result = {
      // results
    };
    return result;
  }

);

最好为每个输入流添加临时.do()副作用,以查看它们是否被调用并首先返回结果,特别是因为组合块似乎没有在您的调用中被调用以前的例子。