0

假设我有一个可观察的过滤器数组：

export interface MyFilter {
  ColumnName: string;
  Filter?: (items: Item[]) => Item[];
  Value?: any;
}

filters: Subject<MyFilter[]> = new Subject(MyFilter[]);

会有很多过滤器可以从主题中动态添加和删除。每个过滤器都有自己的 Angular 组件。我需要能够让每个过滤器组件侦听该主题，并能够判断何时从主题中添加、修改或删除其各自的 MyFilter 对象，并采取相应的行动。

像这样的东西：

filters.pipe(
  map(filters => filters.filter(filter => filter.ColumnName === this.columnName))
).subscribe(filters => {
  switch (filters.length) {
    case 0:
      // the filter isn't here
    case 1:
      // the filter is here
    default:
      // this really shouldn't happen, each filter should only have 0 or 1 occurrence
  }
});

然后有一个包含许多属性的对象数组，我通过 combineLatest 运行这些对象，以及过滤器集合，并将结果显示在表格中。我还有另一个主题，它具有类似的数组，用于对多列进行排序。还有一个主题，其中包含要显示在表中的列集合，我们使用 ngFor 循环对其进行迭代。

我认为这不是处理过滤器的正确方法，但我正在尝试找出利用 rxjs 以正确方式执行此操作的最佳方法。例如，如果任何其他过滤器组件修改了过滤器集合，那么可观察事件不会在每个过滤器组件上触发吗？我希望能够过滤掉任何不涉及特定过滤器组件的列/属性的事件。但同时，最好知道何时从集合中删除列的过滤器。

有一个过滤器运算符，但它似乎适用于整个数组，而不是数组的各个项目。我也许可以使用 lodash 的一些功能，像这样：

filters.pipe(
  filter(filters => _.some(filters, { ColumnName: this.columnName }))
)

但这感觉不对。当它的对象从集合中删除时，它仍然不会触发事件。RXJS 文档非常混乱，所以我不能 100% 确定哪种运算符或运算符组合最适合这种情况。非常感谢任何帮助。

4

0 回答 0