Question

我有一个购物车服务，可提供有关购物车的反应性数据：

export interface OrderItem {
  product: IProduct
  quantity: number
}

private subject = new BehaviorSubject<OrderItem[]>([])
private orderItems: Observable<OrderItem[]> = this.subject.asObservable()

getItems(): Observable<OrderItem[]> {
    return this.orderItems
  }

我想创建一个方法，该方法将返回购物车中产品数量的可观察，如下所示（伪代码）：

return getItems().subscribe(items => {
  let cartSize = 0
  items.forEach(item => cartSize += item.quantity)
})

因此基本上可以返回cartSize作为观察值，我该怎么做？

Answer 1

这不是一个可观察项，取决于另一个可观察项（这将要求诸如mergeMap，switchMap和withLatestFrom之类的运算符），但这仅仅是您可观察项的一种转换。这将是一张地图。

例如：

const totalQuantity$ = getItems().pipe(
  map(items => {
    // this would be nicer using a reduce but ok
    let cartSize = 0
    items.forEach(item => cartSize += item.quantity)
    return cartSize
   })
 )

然后在某处订阅totalQuantity $。

Answer 2

不相关，但是您可以删除此orderItems属性，并将getItems方法重构为：

getItems(): Observable<OrderItem[]> {
  return this.subject.asObservable()
}

无论如何，如果您在此方法中使用一些管道运算符，则您只能使用this.subject，因为所有管道均返回Observable

如何在RxJS中创建依赖于另一个Observable的Observable

2 个答案: