Angular2 - モデルは

Question

を変更した後、私は私のangular2アプリで単純なコンポーネント持っているメソッドを呼び出します。私は

<div class="basket"> 
    On your card: {{basketAmount()}} 
</div> 

<table class="table table-striped"> 
    <thead class="thead-inverse"> 
    <tr> 
    <th>#</th> 
    <th>Name</th> 
    <th>Desc</th> 
    <th>Price</th> 
    <th>Amount</th> 
    </tr> 
    </thead> 
    <tbody *ngFor="let product of products"> 
    <tr> 
    <th scope="row">{{product.id}}</th> 
    <td>{{product.name}}</td> 
    <td>{{product.description}}</td> 
    <td>{{product.price}}</td> 
    <td>{{product.amount}}</td> 
    <button type="button" class="btn btn-success" (click)="addProductToCart(product)">Add to cart</button> 
    </tr> 
    </tbody> 
</table> 

とCartService

@Injectable() 
export class CardService { 
    private cart: Product[] = []; 

    constructor() { 
    } 

    addProduct(product: Product) { 
    this.cart.push(product); 
    } 

    getTotalPrice() { 
    const totalPrice = this.cart.reduce((sum, cardItem) => { 
     return sum += cardItem.price, sum; 
    }, 0); 
    return totalPrice; 
    } 

    getNumberOfProducts() { 
    const totalAmount = this.card.reduce((sum, cardItem) => { 
     return sum += cardItem.amount, sum; 
    }, 0); 
    return totalAmount; 
    } 
} 

export interface Product { 
    id: number; 
    name: string; 
    description: string; 
    price: number; 
    amount: number; 
} 

：それに接続されている

@Component({ 
    selector: 'app-product', 
    templateUrl: './product.component.html', 
    styleUrls: ['./product.component.css'], 
    providers: [ProductService, CardService] 
}) 
export class ProductComponent implements OnInit { 
    private products; 

    constructor(private productService: ProductService, private cartService: CartService) { 
    } 

    ngOnInit() { 
    this.loadProducts(); 
    } 

    loadProducts() { 
    this.productService.getProducts().subscribe(data => this.products = data); 
    } 

    addProductToCart(product: Product) { 
    this.cartService.addProduct(product); 
    } 

    basketAmount() { 
    this.cartService.getNumberOfProducts(); 
    } 

htmlファイルを何かをカートに追加して表示した後、カートのアイテム数を更新したい景色。私はクリックしてaddProductToCartメソッドを呼び出してカートにアイテムを追加します。同時に、私はこのアイテムの数をbasketAmount()で更新したいと考えています。これはCartServiceで定義され、カートのアイテム数を返します。私はこのbasketAmount()メソッドを何らかの形でトリガーすべきだと思っていますが、私は方法はわかりません。 良い方法でそれを行うには？

Answer 1

あなたは再びbasketAmountメソッドを呼び出して、新しい値を持つ必要がありますあなたのカート内の項目を押した後、複数のオプション

1. を持っています。
2. BehaviorSubjectを使用できます。この場合、購読するだけでカートにアイテムをプッシュするたびにカートが自動的に更新されます。

Answer 2

[OK]を解決しました。 私はProductComponentへの変数の簡単なnumberOfItemsを追加します。

export class ProductComponent implements OnInit { 
    private products; 
    private numberOfItems; 

    constructor(private productService: ProductService, private cardService: CardService) { 
    } 

    ngOnInit() { 
    this.loadProducts(); 
    } 

    loadProducts() { 
    this.productService.getProducts().subscribe(data => this.products = data); 
    } 

    addProductToCard(product: Product) { 
    this.cardService.addProduct(product); 
    } 

    basketAmount() { 
    this.numberOfItems = this.cardService.getNumberOfProducts(); 
    } 
} 

と私はクリックして更新numberOfItems後の二つの方法を呼び出すビュー上：

<div class="basket"> 
    On your card: {{numberOfItems}} 
    </div> 

    <table class="table table-striped"> 
     <thead class="thead-inverse"> 
     <tr> 
     <th>#</th> 
    <th>Name</th> 
    <th>Desc</th> 
    <th>Price</th> 
    <th>Amount</th> 
     </tr> 
     </thead> 
     <tbody *ngFor="let product of products"> 
     <tr> 
     <th scope="row">{{product.id}}</th> 
     <td>{{product.name}}</td> 
     <td>{{product.description}}</td> 
     <td>{{product.price}}</td> 
     <td>{{product.amount}}</td> 
     <button type="button" class="btn btn-success" (click)="addProductToCard(product); basketAmount()">Add to card</button> 
     </tr> 
     </tbody> 
    </table>