Javascript 角度-如何在课堂上处理可观察到的

新的角度。想学习如何集中管理使用ngRx的状态。而且，我以前没有使用过可观察的，所以我真的被卡住了。下面是我的代码，其中包含购物车和对象数组。我只需要用reduce（）遍历

购物车

，这是一个对象数组，以获得总价格。无论我尝试什么，它都不起作用。加上，到目前为止，我的代码运行良好，我能够从商店获取购物车数据。 如果有人能为我指引正确的方向，我将不胜感激

谢谢大家!

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-cart-icon',
  templateUrl: './cart-icon.component.html',
  styleUrls: ['./cart-icon.component.scss']
})
export class CartIconComponent {

  constructor(private store: Store<any>) {}

  cart: Observable<Array<any>>

  ngOnInit() {
    this.cart = this.store.select('cart')
  }
}

从'@angular/core'导入{Component}；
导入{Store，从'@ngrx/Store'中选择}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：“应用程序购物车图标”，
templateUrl:'./cart icon.component.html'，
样式URL:['./购物车图标.component.scss']
})
导出类CartIconComponent{
构造函数（私有存储：存储）{}
购物车：可见
恩戈尼尼特（）{
this.cart=this.store.select（'cart'）
}
}

如果购物车是一个形式为

{price:number}

的对象数组，请使用带有subscribe的pipe reduce方法以具体形式具体化值

totalPrice: number;

ngOnInit() {
    this.store.select('cart').pipe(reduce((acc, val) => { return { price: acc.price + val.price } } )).subscribe(val=> this.totalPrice = val.price);
}

或者，只需使用pipereduce方法将值保留为可观察值，以便使用异步管道直接在HTML文件中呈现（如果您希望实现这一点，则效率更高）

total=可观察；
恩戈尼尼特（）{
this.totalPrice=this.store.select（'cart'）.pipe（reduce（（acc，val）=>{return{price:acc.price+val.price}}}）；
}

---

在最后一种情况下，异步管道将采用

{（total | async）？.price}}

的形式。如果购物车是一个具有

{price:number}

形式的对象数组，请使用带有subscribe的pipe reduce方法将值具体化

totalPrice: number;

ngOnInit() {
    this.store.select('cart').pipe(reduce((acc, val) => { return { price: acc.price + val.price } } )).subscribe(val=> this.totalPrice = val.price);
}

或者，只需使用pipereduce方法将值保留为可观察值，以便使用异步管道直接在HTML文件中呈现（如果您希望实现这一点，则效率更高）

total=可观察；
恩戈尼尼特（）{
this.totalPrice=this.store.select（'cart'）.pipe（reduce（（acc，val）=>{return{price:acc.price+val.price}}}）；
}

---

在最后一种情况下，异步管道的形式为

{（total | async）？.price}

您需要参考此站点您需要参考此站点感谢您的回复。我没有定义val，所以我开始像这样进行故障排除：this.store.select（'cart'）.pipe（reduce（（accumalatedTotal，cartItem）=>accumalatedTotal+（cartItem.price），0））//this.store.select（'cart'）.pipe（map（（cartItem）=>cartItem））.subscribe（（val:number）=>console.log（===>>，val））；有了这个注释掉的地图，我可以打印项目，但我不能用reduce看到任何东西。你能看到这里有什么问题吗？另外，你能更新你的代码吗？订阅是val:number，因为ts给了我一个错误。为了使reduce更简单，即使它不返回任何东西，而如果我替换为map，它会返回cartItem。this.store.select（'cart'）.pipe（reduce（（accumalatedTotal，cartItem）=>cartItem））也尝试了第二个选项，我在组件html中有以下内容，但它作为对象打印。Total:{{totalPrice | async}}我想这可能与reduce（）行为有关，比如在这篇文章的评论中指定的：尝试一些东西，但仍然不确定如何修复我已经更新了购物车是一个对象数组的情况下的答案{price:number}谢谢你的回复。我没有定义val，所以我开始像这样进行故障排除：this.store.select（'cart'）.pipe（reduce（（accumalatedTotal，cartItem）=>accumalatedTotal+（cartItem.price），0））//this.store.select（'cart'）.pipe（map（（cartItem）=>cartItem））.subscribe（（val:number）=>console.log（===>>，val））；有了这个注释掉的地图，我可以打印项目，但我不能用reduce看到任何东西。你能看到这里有什么问题吗？另外，你能更新你的代码吗？订阅是val:number，因为ts给了我一个错误。为了使reduce更简单，即使它不返回任何东西，而如果我替换为map，它会返回cartItem。this.store.select（'cart'）.pipe（reduce（（accumalatedTotal，cartItem）=>cartItem））也尝试了第二个选项，我在组件html中有以下内容，但它作为对象打印。Total:{{totalPrice | async}}我想这可能与reduce（）行为有关，比如在这篇文章的评论中指定的：尝试一些东西，但仍然不确定如何修复我已经更新了cart是对象数组的情况下的答案{price:number}