RxJs 结合 Observables答案

【问题标题】：RxJs Combine ObservablesRxJs 结合 Observables
【发布时间】：2016-09-30 14:57:55
【问题描述】：

当我有两个 Observables 我想在 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);
}

再次生成无限查询。

编辑2：

我也试过 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 中，结果未打印

【问题讨论】：

你试过Observable.forkJoin([obs1, obs2, ...])吗？
是的，我做到了。我也没有成功。如前所述，我只是收到错误或无限 API 调用。 :(
它抛出什么错误？操作员Observable.forkJoin() 应该做你需要的。
用 forkJoin 更新了问题 - 在这个实现中它不会抛出任何错误，但它也不会返回/处理值。

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

【解决方案1】：

另一种选择是尝试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() 副作用，以查看它们是否被调用并首先返回结果，特别是因为在您之前的示例中似乎没有调用 combine 块.

【讨论】：