在 Angular/NgRx 中获取数据后，如何仅订阅 observable？答案

【问题标题】：How to only subscribe to an observable after its data was fetched in Angular/NgRx?在 Angular/NgRx 中获取数据后，如何仅订阅 observable？
【发布时间】：2020-10-29 06:58:11
【问题描述】：

我有一个组件，我希望在单击按钮时从后端获取一些数据，并根据该数据导航到正确的页面。

我在ngOnInit()函数中有如下代码：

ngOnInit() {
  this.store.select(getUsers)
  .pipe()
  .subscribe((users) => {
    this.navigateToNextStep(users.length > 0);  // navigates to correct page based on the boolean parameter
  });
}

我有以下功能：

nextClicked() {
  this.store.dispatch(MyActions.getUsers());
}

想法是我会在创建组件时订阅可观察用户列表，然后在单击按钮时获取列表，触发订阅。但是，即使未获取用户列表，订阅也会在我进入页面后立即触发。

什么是实现我的目标的正确方法，即只有当点击主动获取用户列表时才会发生导航？另请注意，用户列表已保存在商店中，因此在用户导航离开后返回页面的情况下，我需要避免任何意外行为。

【问题讨论】：

但是您订阅的是ngOnInit？如果您希望仅在单击后导航，则可以将来自 ngOnInit 的整个订阅块移动到 nextClicked() 处理程序。
@MichaelD 你可能是对的。但是，它实际上并不能解决问题，因为订阅块和数据的获取是异步的。这意味着一旦调用nextClicked()，订阅就会被触发——在后端服务有机会返回数据之前。我需要的是一种在获取数据后订阅的方法。
我不熟悉 NgRX。请说出这里的哪个语句从后端服务返回数据。在当前代码中，订阅next 回调将仅在语句this.store.select(getUsers) 发出通知时触发。
从后端实际获取数据发生在其他地方。当动作MyActions.getUsers() 被调度时，它被所谓的效果捕获，它通过服务获取数据。然后将数据传递给更新状态的 Reducer。然后通过this.store.select(getUsers) 选择器向所有观察此数据的人发送通知。我的问题是订阅时似乎立即发出了通知，此时我的数据还没有被提取。
@MichaelD 是对的，你应该订阅 nextClicked()。您还可以与通知共享代码吗？我想你必须移动它，以便在后端调用之后发生。

标签： angular observable ngrx

【解决方案1】：

您可以使用.pipe(filter(data => !!data)) 跳过存储中的初始空值

【讨论】：