Как я могу сложить значения в получающем компоненте, который отправляется через службу в Angular? - PullRequest
Новая
       19

Как я могу сложить значения в получающем компоненте, который отправляется через службу в Angular?

0 голосов
/ 08 мая 2019

Я создаю простой интернет-магазин, в котором отправляю фильм из «product-component» через «cart-service» в «cart-component», используя BehaviorSubject и наблюдаемый.

Работает, но я отправляю только один фильм, и он всегда заменяет старый фильм новым отправляемым объектом, когда я нажимаю «купить».

Я пробовал такие вещи, как ++ или + = в основном везде, но потом он выигралне компилировать.

Компонент продукта: 

import { Component, OnInit, Input, HostListener } from '@angular/core';
import { IMovie } from '../interfaces/IMovie';
import { CartService } from '../services/cart.service';

@Component({
  selector: 'app-display-movie',
  templateUrl: './display-movie.component.html',
  styleUrls: ['./display-movie.component.scss']
})

export class DisplayMovieComponent implements OnInit {
   @Input() movie: IMovie;

   message: string;

   constructor(private cartservice: CartService) { }

   ngOnInit() {
   }

  addToCart(movie){
    this.cartservice.updateCart(movie);
    localStorage.setItem("cart", JSON.stringify(movie));
  }

}

HTML 

 <button (click)="addToCart(movie)" class="btn-add">Buy</button>

Сервис: 

import { Injectable, Output, EventEmitter } from '@angular/core';
import { IMovie } from '../interfaces/IMovie';
import { BehaviorSubject } from 'rxjs';
import { Subject } from 'rxjs';

@Injectable()
export class CartService {

  private cartSource = new BehaviorSubject<any[]>([]);

  currentShoppingCart = this.cartSource.asObservable();

  constructor(){}

  updateCart(item: any[]){
    this.cartSource.next(item);

  }
}

Компонент корзины 

import { Component, OnInit, Input } from '@angular/core';
import { CartService } from '../services/cart.service';
import { IMovie } from '../interfaces/IMovie';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
  message: string;
  item: IMovie[];

  constructor(private cartservice: CartService) {}

  ngOnInit() {
  this.cartservice.currentShoppingCart.subscribe(item => this.item = item)
  }
}

Я хочу, чтобы корзина складывала элементы в виде массива, а затем отображала этот массив в представлении компонента корзины.

1 Ответ

1 голос
/ 08 мая 2019

Re '++' и '+ =' вы можете использовать их только с числами, так что они не сильно помогут с массивами или наблюдаемыми. Для добавления элементов в массив вы можете использовать myArray.push (item), который добавит элемент в конце, или myArray.unshift (item), который добавит элемент в начало массива.

Общий совет - если ваше свойство содержит массив - как ваш 'item: IMovie [], лучше назвать его' items: IMovie [] '.

Одним из возможных решений вашей проблемы может быть, если у CartService будет свойство 'cart' - которое будет массивом фильмов. Затем метод addMovie будет добавлять текущий выбранный фильм в этот массив и транслировать этот новый массив, используя метод next из BeaviorSubject. 

export class CartService {
    private cartSource = new BehaviorSubject<any[]>([]);
    private cart: IMovie[] = []

    currentShoppingCart = this.cartSource.asObservable();  

    addMovie(movie: IMovie){
        this.cart.push(movie);
        this.cartSource.next(this.cart);
    }
}


export class CartComponent implements OnInit {
    items: IMovie[];

    constructor(private cartservice: CartService) {}

    ngOnInit() {
        this.cartservice.currentShoppingCart.subscribe(items => this.items = items)
    }
}
...