即时访问Observable数据

时间:2017-06-16 01:10:38

标签: javascript angular redux rxjs observable

我正在使用Angular,ngrx / store和rxjs

所以我有购物车减速机减价机。

当我从API中获取项目时,我需要知道它们是否已经在购物车中。

因为我已经实现了分页,我认为最好的方法是在实际服务中检查提取项目并在Items对象中创建一个InCart字段。

我不想在订阅中这样做,因为当我提取项目时我没有更改Cart状态,因此订阅永远不会被调用。如果我使用地图 我也无法访问服务中的数据。

所以我真的不确定如何以“最佳实践方式”做到这一点。

也许我还可以用旧方式将Cart对象保存在Cart服务中,但我认为这不是最好的做法。

以下代码对我来说是理想的情况。 (但是,这不起作用,因为我无法使用 pluck 地图访问购物车对象。)

getItems(): Observable<Item[]> {
  return this.http.get(url)
    .map(this.extractData)
    .map(this.extractItemlist)
    .catch(this.handleError)
}

private extractItemlist(res: ApiResponse) {
  switch (res.response.type) {
    case ApiResponse.TYPE.ERROR:
      throw res.response.data.message
    case ApiResponse.TYPE.SUCCESS:
      this.checkIfItemsAreInCart(res.response.data.list)
      return res.response.data.list
  }
}

private checkIfItemsAreInCart(items: Item[]) {
  const cart = this.store.select<CartState>('cart').pluck('cart')

  for (const item of items) {
    for (const cartItem of cart.items) {
      if (item.details.item_id === +cartItem.item_id) {
        item.inCart = true
      } else {
        item.inCart = false
      }
    }
  }
}

有没有人知道如何实现这个目标?我是这个可观察物的新手,所以可能这就是为什么我还没有想出一个好的解决方案。

我真的很感激一些帮助。

1 个答案:

答案 0 :(得分:1)

  

我不想在订阅中这样做,因为当我提取项目时我没有改变购物车状态所以订阅永远不会被调用

订阅Observable将在第一次调用时调用,因此它不需要&#34;更改&#34;。

private checkIfItemsAreInCart(items: Item[]) {
  this.store.select<CartState>('cart')
    .take(1)
    .subscribe(cart => {
      for (const item of items) {
         for (const cartItem of cart.items) {
           if (item.details.item_id === +cartItem.item_id) {
             item.inCart = true
           } else {
             item.inCart = false
           }
         }
       }
  });
}