如何更新使用 of(myArray) 创建的 RxJS Observable 的值

Question

我在使用 Angular 和 Observable 时遇到了问题。

\n\n

我有一个 Basket 页面，订阅 BasketService 中数组的 Observable，其中包含我的客户订单。当我单击验证按钮时，我清空了订单数组，但即使我的购物篮页面已订阅了我的可观察对象，它也不会更新。

\n\n

在我的 BasketPage.ts 中

\n\n

  ngOnInit() {\nthis.nourritureSubscription = this.panierService.nourritureStore.subscribe((data) => {\n  if(data.length === 0) {\n    this.isNourriturePanierEmpty = true;\n  } else {\n    this.nourriturePanier = data;\n    console.log(data)\n    this.isNourriturePanierEmpty = false;\n  }\n});\nthis.menuSubscription = this.panierService.menuStore.subscribe((data) => {\n  if(data.length === 0) {\n    this.isMenuPanierEmpty = true;\n  } else {\n  this.menuPanier = data\n  console.log(data)\n  this.isMenuPanierEmpty = false;\n  }\n})\n}\nconsumePanier(){\nlet commandeSucess : boolean;\nthis.panierService.consumePanier()\nthis.commandeEnvoyee();\n}\nasync commandeEnvoyee() {\nconst alert = await this.alertCtrl.create({\n    header: 'Commande envoy\xc3\xa9e !',\n    message: 'Votre commande a \xc3\xa9t\xc3\xa9 approuv\xc3\xa9e et enregistr\xc3\xa9e',\n    buttons: [\n        {\n            text: 'Valider',\n            role: 'cancel',\n            cssClass: 'primary',\n            handler: () => {\n              this.ngOnInit();\n             }\n         }\n      ]\n });\n\n await alert.present();\n}\n

\n\n

在我的 BasketService.ts 中

\n\n

nourritureArray: Nourriture[] = [];\nmenuArray: Menu[] = [];\n\nnourritureStore = of(this.nourritureArray)\nmenuStore = of(this.menuArray)\n\nconsumePanier(){\nlet panierRef = [];\nlet user=JSON.parse(localStorage.getItem('user'));\n\npanierRef.push({idUser: user.id})\n\nObject.entries(this.nourritureArray).forEach(([key, value])=>{\n  panierRef.push({idNourriture: value.id, nameNourriture: value.name})\n})\nObject.entries(this.menuArray).forEach(([key, value])=>{\n  panierRef.push({idMenu: value.id, nameMenu: value.name})\n})\n\nlet commande = JSON.parse(JSON.stringify(panierRef));\n\npanierRef= [];\n\nthis.nourritureArray = [];\nthis.menuArray = [];\n}\n

\n\n

有什么办法吗？

\n\n

提示： \n - 当我重新加载 url 时，我有更新的存储（但我无法使用路由器强制重新加载，不知道为什么...）\n - 当我使用 ngOnInit 刷新时，我从 observable 获取旧值，即使我的数组是空的......

\n

Answer 1

该of方法只是创建一个Observable将发出给定参数然后完成的方法。它不会跟踪您事后对参数所做的任何更改。
您可能想看看如何使用主题。主题同时充当 anObserver和 an Observable，允许您将数据推送给主题订阅者。在您的情况下，该数据将是您的存储数组。不要从字面值创建 Observables，而是从可以在值更改时更新的主题创建它们。
这是一个超级简化的示例，用于实现我认为您正在寻找的单个数组：

export class BasketService {

  // Create a new BehaviorSubject with an initial value of []
  private Subject<Menu[]> menuSubject = new BehaviorSubject<>([]);

  // Expose the menuSubject as an Observable (prevents consumers from pushing values)
  Observable<Menu[]> menuStore = menuSubject.asObservable();

  public addMenuItem(menuItem: Menu) {
    // Get the current value of the menu store
    const menus = this.menuSubject.getValue();
    // Add the new menu 
    menus.push(menuItem);
    // Push the updated menu to the subject
    this.menuSubject.next(menus); // This is what notifies subscribers
  }

  public consumePanier() {

    /// ... your business logic

    // Update the value of the subject with an empty array
    this.menuSubject.next([]); // This is what notifies subscribers
  }  
} 

在这个例子中需要注意的重要一点是，每当您对数据进行更改时，您都必须使用该方法将新数据推送到主题，next以便订阅者收到通知。