Website-Suche

angular - Angular2: Zwei Observable<number>-Werte summieren

Ich habe einen Service mit zwei verschiedenen Funktionen, die die Anzahl der Elemente in einem Array ermitteln, das von einem BehaviorSubject überwacht wird.

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

In meiner Komponente habe ich zwei Methoden, um diese Zahlen zu erhalten:

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

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

In meinem HTML kann ich die Werte so anzeigen:

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

Es funktioniert einwandfrei und aktualisiert die Werte, wenn es eine Änderung am Subject gibt, aber ich muss die beiden Werte der beiden Observables summieren.

Wie kann ich das erreichen?

Ich habe es versucht

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

Aber es erzeugt den Fehler: Operator '+' kann nicht auf die Typen Observable und Observable angewendet werden

Antwort #1

Sie können diese Observables mit combineLatest kombinieren und dann einen neuen Wert zurückgeben, der die Summe beider ist. Sie können eine neue Funktion wie folgt hinzufügen:

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

Und dann können Sie es in der Vorlage so verwenden:

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

Verwandte Artikel