Angular 14从NGRX Store获取购物车数量显示异常问题求助

作为NGRX新手，我在Home组件中向basketStore添加数据的功能正常，通过Redux DevTools能看到购物车数据。现在需要在Header组件中动态显示购物车商品数量，已经在构造函数里通过basketStore.select获取了购物车长度的Observable，但模板中直接插值{{this.basketCount}}时始终显示[Object Object]，使用Angular 14，求排查错误原因。

相关代码 #

Home组件代码 #

export class HomeMobileComponent implements OnInit {
constructor(private store: Store, private basketStore: Store<{ basket: Photo[] }>) { }

photos$ = this.store.pipe(select(selectPhotos));
basketPhoto: Array<Photo> = [];

ngOnInit(): void {
  this.store.dispatch(invokePhotosAPI());
}

AddToBasket(photo: Photo) {
  this.basketPhoto = [...this.basketPhoto, photo];
  console.log(photo.id);
  this.basketStore.dispatch(basketDetail({ basket: this.basketPhoto }))
}
}

Header组件代码 #

basketCount?: Observable<number|undefined>;

constructor(public dialog: MatDialog, private basketStore: Store<{ basket: Photo[] }>) {
  this.searchValue = '';
  this.basketCount = this.basketStore.select(basket => basket.basket.length);
  
}

模板代码 #

{{this.basketCount}}

• 核心错误原因：basketCount是一个Observable异步数据流对象，Angular模板直接插值Observable时，会默认调用对象的toString()方法，因此显示[Object Object]。Observable需要通过订阅才能获取其发射的实际值，Angular提供了Async Pipe来自动完成订阅、取值和销毁订阅的工作。
• 直接解决方法：修改模板中的插值语法，使用async管道，同时去掉模板中的this.（Angular模板中访问组件属性不需要加this）：

  {{ basketCount | async }}
  

• 额外优化建议：
  1. 明确组件中basketCount的类型，如果store初始状态中basket是数组，可去掉undefined，避免不必要的类型模糊：

     basketCount: Observable<number>;
     

  2. 确保store的初始状态中basket被初始化为空数组，防止读取length时出现报错，在对应的reducer中设置初始状态：

     const initialState = { basket: [] as Photo[] };
     

  3. 优化Home组件的添加逻辑：当前组件本地维护basketPhoto容易导致组件状态与store不一致，建议直接从store获取当前购物车数据后再添加新商品：

     import { take } from 'rxjs';
     
     AddToBasket(photo: Photo) {
       this.basketStore.select(state => state.basket)
         .pipe(take(1)) // 只取当前最新值后取消订阅
         .subscribe(currentBasket => {
           const updatedBasket = [...currentBasket, photo];
           this.basketStore.dispatch(basketDetail({ basket: updatedBasket }));
         });
     }
     

内容的提问来源于stack exchange，提问作者bilpor