Question

我想在购物车的应用服务中实施。我在新购物车中创建商品时遇到问题。当我想将新创建的购物车关联到通过我的服务获取的产品时，出现错误：

类型“可观察”缺少类型“产品”中的以下属性：ID，名称，描述，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);}

CartComponent：

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>

欢迎任何帮助或建议

Answer 1

这是一个冗长的问题。无论如何，下面是答案。

在获得产品实施之前，我们无法对此发表评论。在初步视图中，这是因为您试图将SignedProposal数据类型分配给Observable数据类型。因为，您要通过调用以下行来为产品分配值

产品：this.productService.getProductById（id）

此函数返回的类型是Observable，而Products不是。您只需将代码更改为

即可解决此问题

Products

getProductById不返回数字数据类型。如上所述，它是this.productService.getProductById(id) .subscribe((data)=>{this.Products = data;});。

因此，就像我们在上面所做的那样，可以更正为与

相似

Observable

如果您的情况没有得到纠正，请告诉我们。

Answer 2

我不明白您面临的问题，正在提供一般解决方案。

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

 import { Observable } from 'rxjs';

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

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

角度5：购物车

2 个答案: