订阅不会更新 Angular 中的视图

Question

我的 Body.component.ts 中有.subscribe()

ngOnInit(): void {
    this.pizzaSub = this.postService.getPizzas()
          .subscribe((pizzas: IPizza[]) => {
              this.pizzas = pizzas;
          });
}

和服务 post.service.ts 应该更新我的身体视图

getPizzas(params?: Array<number | string>): Observable<IPizza[]> {
  return this.http.get<IPizza[]>(`http://localhost:3000/pizzas?${[params]}`);
}

但是在点击另一个组件时它不会发生

onPizzaClick(pizzaType: number): void {
    this.postService.getPizzas([`category=${pizzaType}`]);
}

我需要在单击另一个组件时更新正文视图中的数据

Answer 1

您没有订阅 onPizzaClick function 中的 Observable：

onPizzaClick(pizzaType: number): void {
    this.postService.getPizzas([`category=${pizzaType}`]).subscribe(
      (pizzas: IPizza[]) => {
             //Do whatever you want with pizzas
          }
 );
}

Answer 2

据我了解，您应该使用主题处理服务内部的数据，每当您收到数据时，您都会更新主题以通知订阅此主题的组件有关新数据的信息。

您的服务

pizzas$ = new Subject();
getPizzas(params?: Array<number | string>): Observable<IPizza[]> {
  return this.http.get<IPizza[]>(`http://localhost:3000/pizzas?${[params]}`);
}

updatePizzas() {
 this.getPizzas().subscribe(pizzas => this.pizza$.next(pizzas))
}

你的组件

ngOnInit(): void {
    this.postService.pizza$.subscribe(pizzas => // Do what you want with your pizzas here);
}