Работа с глобальной переменной, инициализированной через BehaviorSubject/Angular2

В моем приложении есть Компонент каталога и Служба корзины. И я хочу добавить товары из моего Каталога (массив объектов, хранящихся в формате 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?


typescript angular behaviorsubject
person Alexandr Belov    schedule 05.02.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Дело в том, чтобы стримить все содержимое корзины. Таким образом, мы должны где-то вести учет всех товаров в корзине в данный момент. Итак, каждый раз, когда товар добавляется в корзину, мы отправляем новое значение потока через cart$.next() - (не push).

Как видно из ошибки, у 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);
  }

}
person Daniil Andreyevich Baunov    schedule 05.02.2017

arrow_upward

arrow_downward

person    schedule
comment
Извините, исправил код. Пожалуйста, взгляните на обновленный вариант - person Alexandr Belov; 05.02.2017