サービスからのデータを角2で取得できません

Question

これはRails APIを使用した簡単なショッピングカートアプリケーションです。 AddToCartボタンとCartComponentを持つShowComponentにアイテムがあります。私は主なカート機能を備えたCartServiceを持っています。私はアイテムとすべての作業の罰金を（私は、結果のすべてのデータを持つオブジェクトを持っている）を追加するために私show.component.htmlでaddToCart関数を使用する

import {Injectable} from '@angular/core'; 
import {Item}  from './cart/cart'; 

@Injectable() 
export class CartService { 

    private cartItems:Item[] = []; 

    constructor() {} 

    getCart() { 
    return this.cartItems; 
    } 

    addToCart(pizza, qtyString:string = "1") { 
    let qty = Number(qtyString); 
    console.log(typeof qty, qty); 
    console.log(typeof pizza, pizza); 
    if (this.cartItems.length == 0) { 
     this.cartItems.push(new Item(pizza['title'], pizza['price'], qty)); 
     console.log(this.cartItems); 
    } else { 
     for(let i = 0; i < this.cartItems.length; i++) { 
     if (this.cartItems[i].title == pizza.title) { 
      console.log(this.cartItems[i].qty); 
      this.cartItems[i].qty += qty; 
      return true; 
     }; 
     } 
     this.cartItems.push(new Item(pizza.title, pizza.price, qty)); 
    } 
    } 

    deleteItems(pizza) { 
    this.cartItems.splice(this.cartItems.indexOf(pizza), 1); 
    } 
    editItems(value, i) { 
    this.cartItems[i].qty = +value; 
    } 
} 

： はここに私のcart.serviceです。しかし、私がカートに行くことを試みるとき、私はこのデータを得ることができません（this.cartItems.length == 0）。ここに私のCartComponentは次のとおりです。ここで

import {Component, OnInit} from '@angular/core'; 
import {CartService}  from '../cart.service'; 
import {Pizza}    from '../pizza'; 
import {Item}    from './cart'; 
import {Router}   from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-cart', 
    templateUrl: 'cart.component.html', 
    styleUrls: ['cart.component.css'] 
}) 
export class CartComponent implements OnInit { 
    cartItems = []; 

    constructor(private cartService: CartService, private router: Router) {} 

    ngOnInit() { 
    this.cartItems = this.cartService.getCart(); 
    console.log(this.cartItems.length); 
    } 

    getTotalPrice() { 
    let total = 0; 
    this.cartItems.forEach((pizza: any, i:number) => { 
     total += pizza.price * pizza.qty; 
    }) 
    return total; 
    } 
} 

は私のアイテムのモデルである：

export class Item { 
    constructor(public title:string, public price:number, public qty:number) {} 
} 

は、私はそれを得るために何をすべき？ありがとう

Answer 1

あなたには、CartServiceをインスタンス化する方法をAngularに知らせるプロバイダの宣言はありません。最も簡単な修正はあなたのCartComponentのデコレータの@Componentにこれを追加することです：

providers: [CartService]

しかし、あなたはあなたのアプリケーションのロジックに基づいてプロバイダーを追加するのに最適な場所に何を決定する必要があります。これは、コンポーネント、その親、または（@NgModuleデコレータの）アプリケーションレベルで行うことができます。

コンポーネントレベルでプロバイダを宣言すると、CartComponentを作成するたびにCartServiceの新しいインスタンスが作成されます（カートルートにナビゲート、戻る、再度ナビゲートすると2つのインスタンスが作成されます）。あなたのコードは[]を使ってカート項目で配列を初期化するので、その内容はCartComponentの新しいインスタンスが作成されるたびに消去されます。

Answer 2

私があなただった場合は、データをバックエンドに（HTTPリクエストを介して）保存してから、「表示」ページでデータを取得します。