Angular 使用 RxJS - 订阅 Observable 时数组的 Reduce 函数不起作用

Question

我有以下代码，我正在尝试计算添加到购物车的所有商品的总数。当我使用 reduce 时，我什么也得不到，但在进行故障排除时，我在其中添加了一个地图（注释掉代码）并打印了一个值。我可以在此处添加更多代码，但您知道一切正常。我能够在购物车中看到数据，这是一个对象数组。我只需要遍历并计算总价。请指教

this.store.select('cart').pipe(reduce((accumalatedTotal, cartItem) => accumalatedTotal + (cartItem.price), 0))subscribe((val:number) => console.log("===>>>", val));

//this.store.select('cart').pipe(map(cartItem => cartItem.price)).subscribe((val:number) => console.log("===>>>", val));

有了那个注释掉的地图，我可以打印商品价格，但我看不到任何减少的东西。

Answer 1

这样试试

this.store.select('cart').pipe(reduce((accumalatedTotal, cartItem) => accumalatedTotal += (cartItem.price), 0)).subscribe((val:number) => console.log("===>>>", val));

我建议您创建一个自定义选择器，例如：

export const getCartProductsTotalPrice = createSelector(
selectShoppingCartState,(state: CartState) => {
return state.cart.reduce((total, current, idx) => total += current.prodotto.price, 0)
;});

并在 component.ts 中简单地调用 return this.store.pipe(select(getCartProductsTotalPrice));

Answer 2

我猜，有两种可能。一是错别字，二是没有完成Observable。当 Observable 完成时，reduce 运算符显示结果。

Answer 3

使用 map 运算符和数组的 reduce 函数来获取总数。

this.store.select('cart').pipe( 
  map(cart => cart.reduce((accumalatedTotal, cartItem) => 
    accumalatedTotal + (cartItem.price * cartItem.quantity), 0)
  )
).subscribe((val:number) => console.log("===>>>", val))

The Reduce operator applies a function to the first item emitted by the source Observable and then feeds the result of the function back into the function along with the second item emitted by the source Observable, continuing this process until the source Observable emits its final item and completes, whereupon the Observable returned from Reduce emits the final value returned from the function.

如果购物车的值是项目流，则 reduce 运算符将很有用。在您的情况下，您只是 select 从商店中获取 'cart'，即一个数组项。

代码分解

this.store.select('cart').pipe( 

)

您商店购物车的 select 价值说

[
  {id: 1, price: 100},
  {id: 2, price: 50},
  ...etc
]

地图运算符向函数提供购物车变量

cart => cart.reduce(
  (accumalatedTotal, {price, quantity}) => 
    accumalatedTotal + (price * quantity), 0)) )

以上计算了购物车中价格的总和

Angular 使用 RxJS - 订阅 Observable 时数组的 Reduce 函数不起作用

Angular with RxJS - Array's Reduce Function Not Working When Subscribed To An Observable

javascript

angular

rxjs-observables

代码分解