Angular2：Sum two Observable <number> values

Question

我有一个具有两个不同函数的服务，它们获取由BehaviorSubject监视的数组内的itens数量。

private itemsInCartSubject: BehaviorSubject<any[]> = new BehaviorSubject([]); 
private itemsInCart: any[] = []; 

private packetsInCartSubject: BehaviorSubject<Pacote[]> = new BehaviorSubject([]); 
private packetsInCart: Pacote[] = []; 

public getTotalItens(): Observable<number> {   

    return this.itemsInCartSubject.map((items: any[]) => { 
     return items.reduce((prev, curr: any) => {    
       return prev + Number(curr.qtd);     
     }, 0); 
    }); 
}; 

    public getTotalPacotes(): Observable<number> { 
    return this.packetsInCartSubject.map((items: any[]) => { 
     return items.reduce((prev, curr: any) => {    
       return prev + Number(1);     
     }, 0); 
    }); 
}; 

里面我的组件我有两个方法来获取这些数字：

public countItens(): Observable<number> { 
    return this.cartService.getTotalItens(); 
} 

public countPacotes(): Observable<number> { 
    return this.cartService.getTotalPacotes(); 
} 

在我的HTML我可以显示这样的价值观：

<p>You have {{countItens() | async}} in your cart</p> 

它工作正常，更新值是什么时候是主题的变化，但我需要将两个观测值的两个值相加。

我该如何做到这一点？

我已经试过

this.cartService.getTotalItens()+this.cartService.getTotalPacotes(); 

但它产生的错误：操作“+”不能应用于类型的可观察和可观察

Answer 1

可以使用combineLatest组合这些观测量，然后返回一个新的值这是两者的总和。您可以添加新的功能是这样的：

public getTotal(): Observable<number> { 
    return this.countItens() 
       .combineLatest(this.countPacotes(), (itens, pacotes) => itens + pacotes); 
} 

然后在模板你可以使用它像这样：

<p>Total is: {{getTotal() | async}}</p> 

Demo of combineLatest