可观察到的火灾只有一次

Question

我决定周末去this RxJS tutorial 学习响应式编程。目标是建立一个简单的页面，使用 Observables 从 Github 用户 API 生成交互式用户列表。

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

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

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

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

• 点击了刷新按钮！
• 已触发建议刷新！
• 提供 30 条新建议！

如您所见，更新用户列表的触发器并未触发。据我了解，通过在流的开头发出一些值，应该随后执行流的其余部分。然而，这似乎只发生在我第一次穿过链条时。我错过了什么？

你可以找到我的项目here的运行版本。

Answer 1

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

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

如果你这样做，你就不需要使用from 函数来创建一个Observable<UserModel>，然后你必须在其上应用flatMap（目前更广为人知的是mergeMap）才能最终应用@ 987654329@ 将其转换回 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));

老实说，虽然我还没有完全理解为什么你原来的解决方案，这是一种很长的弯路，但不起作用。