각도 2로 서비스에서 데이터를 가져올 수 없습니다.

Question

이것은 Rails API가있는 간단한 장바구니 애플리케이션입니다. 내 ShowComponent에 addToCart 버튼과 CartComponent가있는 항목이 있습니다. 나는 Cart 기능을 가진 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를 인스턴스화하는 방법을 알기 쉽게 알려주는 제공자 선언이 없습니다. 간단한 수정은 CartComponent의 데코레이터 @Component이를 추가하는 것입니다 :

providers: [CartService]

하지만 앱 로직을 기반으로 공급자를 추가하는 가장 좋은 장소 무엇을 결정해야합니다. 이 작업은 구성 요소, 부모 또는 앱 수준 (@NgModule 데코레이터)에서 수행 할 수 있습니다.

구성 요소 수준에서 공급자를 선언하면 CartComponent를 만들 때마다 CartService의 새 인스턴스가 만들어집니다 (예 : 장바구니 경로로 이동, 뒤로 이동, 다시 탐색하여 인스턴스 2 개 생성). 코드가 []를 사용하여 카트 항목으로 배열을 초기화하므로 CartComponent의 새 인스턴스가 만들어 질 때마다 내용이 지워집니다.

Answer 2

내가 당신이라면 데이터를 백 엔드에 (HTTP 요청을 통해) 저장 한 다음 "표시"페이지에서 검색합니다.