如何在Observable返回的许多对象上更新新属性？

由 发布于 angularrxjs
 收藏

我正在从我的API中获取大量对象（类别）。从API一次返回50到200个类别。 我正在创建一个可观察的源，它将所有类别过滤到2个子类别中，并将它们作为单个对象下的单独属性返回。

public allCategories$: Observable<any> = this.categoryService.getAllCategories()
  .pipe(
    map((allCategories: CategoryModel[]) => {
      const red = allCategories.filter((cat) => cat.color === 'red');
      const blue = allCategories.filter((cat) => cat.color === 'blue');
      const allCats = { red, blue };
      return allCats;
    }),
    publishReplay(1),
    refCount()
  )

然后，我使用异步管道订阅angular，然后使用单独的ngFors遍历每个红色/蓝色流。

在我的标记中，每个类别都有一个与其关联的复选框。 然后，用户可以搜索所有类别并选中相应的复选框为true，然后用户可以提交这些类别以使用要在其他地方处理的参数进行路由。

我面临的问题是：

  • 这些用户操作可在同一页面上的两个位置使用：模态，提前输入。
  • 这两个组件都必须能够在不更新数据库的情况下可观察和读写源代码，并且本质上暂时保持这两个组件的状态
  • 我无法理解如何在订阅开始后如何更新被下推的对象，因为每当复选框更新时，对于下一个主题，下一个50-200个以上的对象似乎都不太有效

我已经研究了一些更复杂的rxjs模式，但是对于已经blo肿的angular应用程序，他们似乎有些过头了。 对于这样的东西，什么是一个好的，精益的架构？

评论