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

Question

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

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

home.component.ts

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

购物车.service.ts

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

constructor() { }

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

购物车.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);
    }
  )
}

购物车.component.html

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

我尝试了“ChangeDetectorRef”、markForCheck() 和 detectChanges()，但这些都不起作用。

Answer 1

使用BehaviorSubject：

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

constructor() { }

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

Answer 2

尝试覆盖itemList而不是变异：

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