Question

这是使用Rails API的简单购物车应用程序。我在ShowComponent中有addToCart按钮和CartComponent的项目。我有CartService主推车功能。这是我的cart.service：

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

我在show.component.html中使用addToCart函数来添加项目，并且所有工作都正常（我的结果中包含所有数据的对象）。但是当我尝试去购物车时，我无法获得这些数据（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

您的代码没有声明提供程序让Angular知道如何实例化CartService。最简单的解决方法是将它添加到CartComponent的装饰器@Component：

providers: [CartService]

但您需要根据应用逻辑确定添加提供商的最佳位置。这可以在组件，父项或应用程序级别（在@NgModule装饰器中）完成。

请记住，如果在组件级别声明提供程序，则每次创建CartComponent时都会创建一个新的CartService实例（例如，导航到购物车路径，返回，再次导航将创建2个实例）。由于您的代码使用带[]的购物车项目初始化数组，因此无论何时创建CartComponent的新实例，其内容都将被删除。

Answer 2

如果我是你，我会将你的数据保存到后端（通过HTTP请求），然后在“显示”页面上检索它。

无法从Angular 2中的服务获取数据

2 个答案: