angular - Angular2: Summer to Observable<number>-verdier

Jeg har en tjeneste med to forskjellige funksjoner som får antall elementer i en array som overvåkes av en BehaviorSubject.

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

Inne i komponenten min har jeg to metoder for å få disse tallene:

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

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

I min HTML kan jeg vise verdiene på denne måten:

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

Det fungerer fint, oppdaterer verdiene når det er en endring i emnet, men jeg trenger å summere de to verdiene til de to Observables.

Hvordan kan jeg oppnå det?

Jeg har prøvd

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

Men det genererer feilen: Operator '+'' kan ikke brukes på typene Observable og Observable

Svar #1

Du kan kombinere disse Observables ved å bruke combineLatest og deretter returnere en ny verdi som er summen av begge. Du kan legge til en ny funksjon som dette:

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

Og så kan du bruke det i malen slik:

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

Relaterte artikler