angular - 如何在通过 Angular 中的服务发送的接收组件中堆叠值？

Question

我正在制作简单的网上商店，我正在使用 BehaviorSubject 和 observable 将电影从“产品组件”通过“购物车服务”发送到“购物车组件”。

它正在工作，但我只发送一部电影，当我按“购买”时，它总是用发送的新对象替换旧电影。

我基本上到处都尝试过 ++ 或 += 之类的东西，但是它不会编译。

产品组件：

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)
  }
}

我希望购物车将项目堆叠为一个数组，然后在购物车组件视图中显示该数组。

标签： angularservicecomponentsinteraction

Answer 1

Re '++' 和 '+=' 你只能将它们与数字一起使用，因此它们对数组或可观察对象没有太大帮助。要将项目添加到数组中，您可以使用 myArray.push(item) 将项目添加到末尾，或者使用 myArray.unshift(item) 将项目添加到数组的开头。

一般建议 - 如果您的属性包含数组 - 就像您的“项目：IMovie []”，最好将其命名为“项目：IMovie []”。

您的问题的一种可能的解决方案可能是 CartService 是否有一个属性“购物车” - 这将是一系列电影。然后“addMovie”方法将把当前选择的电影添加到该数组中，并使用 BeaviorSubject 的“next”方法广播该新数组。

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)
    }
}