0

我的应用程序中有目录组件和购物车服务。我想将产品从我的目录（存储在 JSON 中的对象数组）添加到购物车。

因此，当我添加/删除产品时，我需要动态更改我的购物车。出于这个原因，我正在尝试使用{ BehaviorSubject }。

购物车服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';


@Injectable()
export class CartService {
  public cart = new BehaviorSubject(null);//my globally available Cart

}

目录组件：

import { Component, OnInit } from '@angular/core';
import { CatalogService } from './catalog.service';
import { CartService } from '../cart/cart.service';//my globally available Cart imported to the current component

@Component({
  selector: 'catalog',
  templateUrl: './catalog.component.html',
  styleUrls: ['./catalog.component.scss']
})

export class CatalogComponent implements OnInit { 
  catalog: any;
  image: any;
  title: string;
  description: string;
  prod: any;
  visible: boolean;

constructor(public catalogService: CatalogService, public cartService: CartService){ } 

ngOnInit(){

    this.catalogService.getCatalogItems().subscribe(
        (data) => this.catalog = data
    );
}

  toCart(prod){
      this.cartService.cart.subscribe((val) => {
            console.log(val); 
      });

    this.cartService.cart.push(prod);//I want to add new product to the Cart by this
  }

}

但是控制台抛出以下错误：在此处输入图像描述

那么，我应该怎么做才能通过BehaviorSubject在全球范围内使用我的购物车？

4

2 回答 2

1

事情是流式传输购物车的全部内容。因此，我们应该在某个特定时刻记录购物车中的所有物品。因此，每次将商品添加到购物车时，我们都会通过 cart$.next() 发送一个新的流值 - （不是推送）。

从错误中可以看出，BehaviourSubject 没有 push 方法。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';


@Injectable()
export class CartService {
  public cart$ = new BehaviorSubject(null);//my globally available Cart

  private cartAr:Product[] = [];

  public addToCart(prod:Product)
  {
    this.cartAr.push(prod);
    this.cart$.next(this.cartAr);
  }
}


//--------Component----------

import { Component, OnInit } from '@angular/core';
import { CatalogService } from './catalog.service';
import { CartService } from '../cart/cart.service';//my globally available Cart imported to the current component

@Component({
  selector: 'catalog',
  templateUrl: './catalog.component.html',
  styleUrls: ['./catalog.component.scss']
})

export class CatalogComponent implements OnInit { 
  catalog: any;
  image: any;
  title: string;
  description: string;
  prod: any;
  visible: boolean;

constructor(public catalogService: CatalogService, public cartService: CartService){ } 

ngOnInit(){

    this.catalogService.getCatalogItems().subscribe(
        (data) => this.catalog = data
    );
}

  toCart(prod){
      this.cartService.cart$.subscribe((val) => {
            console.log(val); 
      });

    this.cartService.addToCart(prod);
  }

}
于 2017-02-05T20:02:41.030 回答
0 
  toCart(prod){
      // missing `this.`
      // vv
      this.cartService.cart.subscribe((val) => {
            console.log(val); 
      });

    this.cartService.cart.push(prod);//I want to add new product to the Cart by this
  }
于 2017-02-05T18:53:08.077 回答