可观察到的火只有一次

Question

我决定在周末收看RxJS教程 ，以了解有关反应式编程的知识。 我们的目标是建立一个简单的页面，该页面使用Observables从Github用户API生成用户的交互式列表。

显示的列表是所检索用户总数的子集（在我的情况下为30个用户中的3个）。 该列表需要可刷新（显示一组新用户），并且您需要能够通过单击每个相应条目上的“删除”按钮来从中删除条目。

我建立了一个Observable链来定义页面的行为。 有些充当触发处理的事件，有些则发布处理后的结果以供应用程序使用。 该链应该动态地导致我的列表被更新。 当前，默认流程如下：

• 启动！
• 建议刷新触发！ （这是检索数据的位置）
• 30个新建议可用！
• 列表更新已触发！ （这是我选择3位用户显示的位置）
• 清单已更新！ （此时，列表显示在页面上）

通过刷新列表并从列表中删除某些内容，可以在启动时触发列表更新。 但是，当我刷新列表时，会发生这种情况：

• 单击刷新按钮！
• 建议刷新触发！
• 30个新建议可用！

如您所见，未触发更新用户列表的触发器。 据我了解，通过在流的开始处发出一些值，流的其余部分应因此而执行。 但是，这似乎只是我第一次遍历整个链条时发生。 我想念什么？

您可以在此处找到我项目的运行版本。

Answer 1

我认为问题在于userStream$ Observable的创建方式。

可以过滤掉未关闭的用户然后取前3个用户 ，这可以通过displayEvents$通过Array的filter和slice方法直接在传递到管道链的UserModel []数组上完成。

如果你这样做，你删除使用的需要from函数创建一个Observable<UserModel>上你就必须申请flatMap （这是目前更好地称为mergeMap ）申请终于toArray改造它放回数组的usermodel。

换句话说，您可以像下面的示例中那样简化代码，其副作用是解决了刷新问题。

this.userStream$ = this.displayEvent$.pipe(
      map(users => users
                .filter((user: UserModel) => !this.closedUsers.has(user))
                .slice(0, this.numberOfUsers))
      // flatMap((users: UserModel[]) => from(users))
      // // Don't include users we've previously closed.
      // , filter((user: UserModel) => !this.closedUsers.has(user))
      // , take(this.numberOfUsers)
      // , toArray()
      , tap(() => console.log('List updated!'))
      // Unless we explicitly want to recalculate the list of users, re-use the current result.
      , shareReplay(1));

老实说，尽管我还没有完全理解为什么您的原始解决方案（这是一个漫长的绕道而行）不起作用的原因。