如何在使用 observable 更新数组时更新 *ngFor 以及如何在网站加载时初始化 observable？

Posted 2023-03-13

【中文标题】如何在使用 observable 更新数组时更新 *ngFor 以及如何在网站加载时初始化 observable？

【英文标题】：How update *ngFor on updating array using observable and how to initialize observable on website load?

【发布时间】：2020-01-26 09:38:48

【问题描述】：

我有两个组件“购物车”和“家”。这里的“主页”组件显示产品列表，它是网站的第一页。当有人使用“购物车”按钮将产品添加到购物车时，我想更新购物车。为此，我创建了一个使用 observable 将消息从“home”发送到“cart”组件的服务。

我面临的问题： 1. 使用 observable 更新数组时 *ngFor 没有更新。 2. 当我在 ngOnInit() 上初始化 observable 时，购物车数组只有在我至少访问购物车组件一次时才会更新。

home.component.ts

sendToCart(id:string) 
this.addtocart.sendId(id);

cart.service.ts

private productIdSource = new Subject<string>();
productId$ = this.productIdSource.asObservable(); 

constructor()  

sendId(id:string) 
this.productIdSource.next(id);

cart.component.ts

itemList:any = ["hello"];

constructor(private addtocart: CartService) 

ngOnInit() 
  this.addtocart.productId$.subscribe(
    msg => 
      console.log(msg);
      this.itemList.push(msg);
      console.log(this.itemList);
    
  )

cart.component.html

<ul>
<li *ngFor="let item of itemList">
    item
</li>
</ul>

我尝试了“ChangeDetectorRef”、markForCheck() 和 detectChanges()，但都没有奏效。

【问题讨论】：

可以分享到stackbiltz吗

【参考方案1】：

使用BehaviorSubject：

private productIdSource = new BehaviorSubject<string>();
productId$ = this.productIdSource.asObservable(); 

constructor()  

sendId(id:string) 
   this.productIdSource.next(id);

【讨论】：

BehaviorSubject 有点用，但它只适用于添加一项。

您一次将一件商品添加到购物车对吧？

从产品列表中，用户可以点击“+购物车”按钮添加多个项目，但数量是一个。

好的..你能分享到stackbiltz吗

【参考方案2】：

尝试覆盖itemList 而不是变异：

this.addtocart.productId$.subscribe(
    msg => 
      this.itemList = [...this.itemList, msg]; // instead of this.itemList.push(msg);
    
  )

【讨论】：

Array 照常更新，但 *ngFor 没有更新。这也是我至少访问一次购物车组件的时候。