时间戳

首页 > 解决方案 > Angular 5：购物车

angular - Angular 5：购物车

问题描述

我想在我的应用程序服务中实现购物车。我在新购物车中创建商品时遇到问题。当我想为从我的服务中获取的产品分配一个新的创建购物车时，我遇到了一个错误：

“Observable”类型缺少“Products”类型的以下属性：Id、Name、Description、DetailedDescription 和另外 5 个。

在该行Product: this.productService.getProductById(id),和第二个错误：

类型“可观察”不可分配给类型“数字”

在行中：TotalPrice: this.productService.getProductById(id).map(data => data.Price)


CartItem 类： 

export class CartItem {
 product: Products;
 quantity: number;
 totalPrice: number;
}

服务：

 getProductById(id) {
return this.http.get<Products>('http://localhost:61085/api/Products/GetProductsById/' + id);}

购物车组件： 

export class CartComponent implements OnInit {

  private items: CartItem[] = [];
  constructor(private activeRoute: ActivatedRoute , private productService: CategoriesProductsService) { }

  ngOnInit() {
    this.addProductToCart();
  }

  addProductToCart() {
    this.activeRoute.params.subscribe( params => {
      let id = +params['id'];
      if (id) {

        let item: CartItem = {
              Product: this.productService.getProductById(id), // <-- error
              Quantity: 1,
              TotalPrice: this.productService.getProductById(id).map(data => data.Price)  // <-- error
        };
          // if the cart is empty, set localstorage
        if (localStorage.getItem('userCart') === null) {
          let cart = [];
          cart.push(JSON.stringify(item));
          localStorage.setItem('userCart', JSON.stringify(cart));
        } else {
          // if the cart exist 
          let cart: any = JSON.parse(localStorage.getItem('userCart'));
          let index = -1;
          for (let i = 0; i < cart.length; i++) {
              let item: CartItem = JSON.parse(cart[i]);
              if (item.Product.Id === id) {
                  index = i;
                  break;
              }
          }
          if (index === -1) {
                cart.push(JSON.stringify(item));
                localStorage.setItem('userCart', JSON.stringify(cart));
          } else {
              let item: CartItem = JSON.parse(cart[index]);
              item.Quantity++;
              cart[index] = JSON.stringify(item);
              localStorage.setItem('userCart', JSON.stringify(cart));
          }
        }
      }
    });
  }
  loadCart() {
    this.items = [];
    let cart = JSON.parse(localStorage.getItem('userCart'));
    for (let i = 0; i < cart.length; i++) {
      let item = JSON.parse(cart[i]);
      this.items.push({
        Product: item.Product,
        Quantity: item.Quantity,
        TotalPrice: item.Product.Price
      });
    }
  }
}

HTML： 

<h2> Cart info</h2>
<div class="row">
  <div class="col-sm-4" *ngFor="let product of items">
    <p>{{product.Product.Name}}</p>
    <p>{{product.Quantity}}</p>
    <p>Total price: {{product.TotalPrice * product.Product.Price}}</p>
  </div>
</div>

欢迎任何帮助或建议

标签： angular

解决方案

我不明白你面临什么问题，我给出了一般的解决方案。

首先在你的 service.ts 中导入 Observable

 import { Observable } from 'rxjs';

之后将观察者添加到您的函数中。

getProductById(id):Observable<Product> {
return this.http.get('http://localhost:61085/api/Products/GetProductsById/' + id);}

推荐阅读