Как обновить * ngFor при обновлении массива с помощью наблюдаемого и как инициализировать наблюдаемое при загрузке сайта?

Question

У меня есть два компонента: «корзина» и «дом».Здесь «домашний» компонент отображает список товаров и является первой страницей сайта.Я хочу обновить корзину, когда кто-то добавляет продукт в корзину, используя кнопку «Корзина».Для этого я создал сервис, используя observable для отправки сообщения из «дома» в компонент «cart».

Проблемы, с которыми я сталкиваюсь: 1. * ngFor не обновляется при обновлении массива с использованием наблюдаемого.2. Поскольку я инициализирую наблюдаемое в ngOnInit (), массив корзины обновляется только при посещении компонента корзины хотя бы один раз.

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 (), но ни один из них не работал.

Answer 1

Попробуйте переписать itemList вместо изменения:

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

Answer 2

Использование BehaviorSubject :

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

constructor() { }

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