angular - RxJS Observables 和构建过滤列表的正确方法

Question

我已经学习了很多教程，完成了演示等。但我仍然无法理解使用 Observables 执行此操作的正确方法...

基本上我所拥有的( Angular )是我的组件中的 2 个可变数组，一个 displayList 和一个 fullList 项目...模板在 displayList 上执行 ngFor。

屏幕上的过滤器调用清除displayList的组件中的过滤函数，然后循环遍历fullList，如果过滤器适用，则将其推送到显示列表——在屏幕上提供实时列表过滤效果...

我知道这是处理此问题的错误方法，但我不能全神贯注于使用可观察对象执行此操作所需的体系结构/模式。我是否制作一个主列表并根据组件私有(private)属性在其上运行 .filter() ？我应该在返回带有 .filter 的可观察列表的方法上执行 ngFor 吗？

提前致谢。

Answer 1

是的，是的，不，是的，不是...换句话说:没有正确答案，这取决于。 (根据您的个人喜好、一般用例、应用程序的现有架构等)

---

在 Controller 中过滤

在你的情况下，可能不需要 rxjs，尽管你应该尽可能避免可变对象/数据，所以你使用 .filter 的想法将是去这里的方式。

---

自定义管道

另一种方法是实现自定义管道并直接在模板中过滤数据:

<div *ngFor="let item of fullList | customFilterPipe:filterSettings">...</div>

---

RxJS 方式

既然你问的是 rxjs-way，我会这样做:

filterSettings$: BehaviorSubject<IFilterData> = new BehaviorSubject(INITIAL_FILTER_SETTINGS); // this is updated with filterSettings$.next(newFilterSettings)
fullList$: BehaviorSubject<IData[]> = new BehaviorSubject([]); // updated through fullList$.next(newFullList);
displayList$ = Observable.combineLatest(this.fullList$, this.filterSettings$)
    .map(([list, filterSettings]) => {
        return list.filter(/* your custom filter based on the filterSettings... */);
    });

这将在 filterSettings$ 或 fullList$ 更改时自动更新 displayList$。

要在模板中使用它，您可以使用 async-Pipe:

<div *ngFor="let item of displayList$ | async">...</div>

---

但同样:对于给定的案例，任何这些解决方案以及您当前的实现都可能是完全有效的实现。