Angular Observable 过滤

Question

我遇到了一个用数组过滤 observable 的问题。 让我解释一下……

我有：

• products$：可观察的；
• filteredProducts$：可观察的；
• selectedFilters = [['过滤器名称', idOfFilter], ['过滤器名称', idOfFilter]]; （开头为空）

这是一个产品对象的结构：

这是我的过滤器数组的结构

我想将过滤结果设置为过滤产品。 对于过滤器，我必须检查产品的过滤器数组是否包含过滤器的名称以及产品值数组是否包含过滤器 ID。

到目前为止，我一直在写这篇文章，但我不知道如何真正过滤我的 Observable...

export class ProductsFilterComponent extends BaseComponent implements OnInit {
    @Select(FiltersState.getAllFilters) filters$: Observable<any>;
    @Input() products$: Observable<Product[]>;
    filteredProducts$: Observable<Product[]>;

    public tempProducts$: Observable<Product[]>;
    public selectedFilters = [];

    constructor(
        private store: Store) { super(); }

    ngOnInit() {
        this.store.dispatch(new GetAllFilters());
        this.uns = this.products$.subscribe(res => console.log('products from filter component', res));
    }

    private filterProducts() {
      this.filteredProducts$ = this.products$.pipe(
          map(productsArray =>
              productsArray.filter(product => {
                  product.filters.filter(filters => filters.values.includes(5));
              }))
      );
  }

}

Answer 1

我认为这可能是一个解决方案：

this.filteredProducts$ = products$.pipe(
  map(
    productsArr => productsArr.filter(
      p => 
        p.filters.some(f => selectedFilters.some(([selectedF]) => selectedF === f.name) // Filter name
        && f.values.some(value => selectedFilters.some(([, filterId]) => filterId === value)) // Filter id
    )
  ),
)

Answer 2

您可以使用combineLatest 创建一个可观察流，只要任何源可观察对象发出新值，该流就会更新。

  filteredProducts$ = combineLatest(this.products$, this.filters$).pipe(
    map(([products, selectedFilters]) => {
      return products.filter(p => {
        // actual filter logic goes here
        return p.filters.some(pf => selectedFilters.some(f => pf == f));
      });
    })
  );

看看这个工作StackBlitz

Answer 3

您可以在ngOnInit() 中声明您的filteredProducts$：

ngOnInit() {
   this.filteredProducts$ = this.products$.pipe(
      switchMap(products => {
         return this.filters$.pipe(
            startWith([]),
            map(filters => {
                return products.filter(/* apply your filter*/)
            })
         );
      })
   )
}

因此，每次您的filters$ 更改时，都会应用过滤器。 使用startWith()，您可以说 Observable filters 在开始发出源 Observable 发出的项目之前发出一个空数组。

编辑：啊，您已经将filters$ 用作@Select。我更新了我的答案。