时间戳

首页 > 解决方案 > BehaivorSubject 不保留数组和重复

angular - BehaivorSubject 不保留数组和重复

问题描述

我有一个服务和一个组件，当我添加一个保留在数组中的值时，但是当我添加其他值时，我的第一个值将值更改为第二个

服务

 export class PrepayService {
  private _carts: BehaviorSubject<ShoppingCart[]>; 
  carts : Observable<ShoppingCart[]>
  dataStore :{
    carts: ShoppingCart[]
  };
  constructor() { 
    this.dataStore = { carts: []};
    this._carts = <BehaviorSubject<ShoppingCart[]>>new BehaviorSubject([]);
    this.carts = this._carts.asObservable();
  }

  addData(dataObj:ShoppingCart) {
    this.dataStore.carts.push(dataObj);
    this._carts.next(Object.assign({}, this.dataStore).carts);
  }
}

零件

export class TableQuoteComponent implements OnInit {

  @Input() quote: QuoteSingle = {};
  cart: ShoppingCart;
  serviceSelected : string;

  constructor(private cartService: PrepayService) { }

  ngOnInit() {
  }
  onSubmitAdd(){
    this.cart = {};
    this.cart = this.quote;
    this.cartService.addData(this.cart);

  }
}

第二部分

export class PrePayComponent implements OnInit {
  carts: ShoppingCart[];
  constructor(private cartService: PrepayService) { }

  ngOnInit() {
    this.cartService.carts.subscribe(carts => this.carts = carts);
    console.log(this.carts);
  }

}

数组值在此处输入图像描述 在 此处 输入图像描述

标签： angularbehaviorsubject

解决方案

我认为这是一个参考价值。 Object.assign({}, this.dataStore)将按值复制而不是引用属性的第一个深度。所以购物车不会按值复制，而是按引用复制。所以我假设这里发生的事情是您添加一个新的“报价”并添加到购物车中，该购物车将添加到主题流中。但是，当您重新分配时，this.quote您也会更改 dataStore 中的值，从而更改主题，因为它是通过引用复制的。

要解决此问题，请修改服务的 addData() 方法，如下所示：

this.dataStore.carts.push(deepCopy(dataObj); // Here we need to deep copy the ShoppingCart. I don't know what your structure looks like. JSON.parse(JSON.stringify(dataObj)) will work for a cheap and easy deep copy.
this._carts.next(deepCopy(this.dataStore.carts)); // Deep copy the carts object here.

抱歉，我不太擅长解释事情，但基本上这是您遇到的参考问题。发生很多。其他人可能有更好的解决方案。

推荐阅读