Wie Pipe auf beobachtbare Daten verwenden?

Question

Ich habe eine Komponente, die einen CartService abonniert, der Einkaufswagenartikel enthält. Was ich tun möchte, ist eine Pipe verwenden, um den Warenkorb Gesamt basierend auf dem Inhalt zu berechnen & den Wert anzeigen.

Wie iteriere ich über meine beobachtbaren Daten, um die Summe zu berechnen/zurückzugeben? Gerade jetzt, wenn ich den Wert auslogge, der in meine Pipe geht, gebe ich nur das Observable zurück, nicht die Daten. Was gibt?

//calculateTotal.pipe.ts 
import { Pipe, PipeTransform } from '@angular/core'; 

import * as _ from "lodash"; 

@Pipe({name: 'calculateTotal'}) 
export class CalculateTotal implements PipeTransform { 
    transform(items: string): any { 

    _.each(items, function(item){ 
     console.log(item); 
    }) 

    return items; 

    } 
} 



// nav-cart.component.pug 
{{items | calculateTotal}} 




//nav-cart.component.ts 
import { Component } from '@angular/core'; 


import { StoreItem } from '../../store.item.interface' 
import { CartService } from '../../services/cart.service' 


@Component({ 
    selector: 'nav-cart-component', 
    styleUrls:['nav-cart.component.css'], 
    templateUrl: 'nav-cart.component.pug', 
    encapsulation: ViewEncapsulation.Native // Use the native Shadow DOM to encapsulate our CSS 

}) 
export class NavCartComponent { 

    cartItems:StoreItem[] = []; 

    items: StoreItem[] ; 
    constructor(private cartService: CartService) { 

    cartService.cartList$.subscribe(
     res => { 
     this.items = res; 
     }) 



    } 

} 

Answer 1

Sie Eigenschaft items ist nicht beobachtbar. Ich kenne Ihren Dienst nicht, wird er ein Array zurückgeben, oder vielleicht sein JSON? Es sollte funktionieren, wenn alles gut geht ..

cartService.cartList$.subscribe(
    res => { 
     console.log(res); // CHECK THIS.. VALID ARRAY? 
     this.items = res; 
    }); 

Und die Pfeife ändern ..

transform(items: ItemStore[]): any { 
    console.log(items); // ARRAY HERE? 

Sie versuchen, dass beobachtbare abonnieren und setzen, dass Gegenstände auf eine lokale Eigenschaft ..

Sie könnten dieses Observable stattdessen direkt verwenden! Da @cartant bereits kommentiert wurde, sollten Sie das async -Rohr und dann Ihr -Rohr verwenden.

// COMPONENT 

items: Observable<StoreItem[]>; 

constructor(private cartService: CartService) { 
    this.items = cartService.cartList$ 
} 

// TEMPLATE 

{{items | async | calculateTotal}} 

Sie können Kette so viele Rohre, wie Sie mögen .. Sie Klammern verwenden können, wenn Sie mögen:

{{((items | async) | calculateTotal) | anyOtherPipe : 'with' : 'three' : 'paramteres'}}