角度rxjs过滤器可观察到

我正在尝试使用一系列过滤器过滤可观察产品,但我真的不知道如何。

让我解释一下,我想将过滤的结果设置为filteredProducts。 对于过滤,我必须检查每个过滤器,产品的过滤器数组是否包含过滤器的名称,以及产品值数组的过滤器ID是否包含。

目前,该过滤器有效,但仅适用于最后一个选定的过滤器,我想用我的selectedFilters数组中的所有过滤器来过滤产品列表。我可以有一个或多个过滤器。

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

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

    ngOnInit() {
        this.store.dispatch(new GetAllFilters());
    }

    private filterProducts() {
        this.filteredProducts$ = this.products$.pipe(
            map(
                productsArr => productsArr.filter(
                    p =>
                        p.filters.some(f => this.selectedFilters.some(([selectedF]) => selectedF === f.name.toLowerCase()) // Filter name
                            && f.values.some(value => this.selectedFilters.some(([, filterId]) => filterId === value)) // Filter id
                        )
                )
            )
        );
        this.filteredProducts$.subscribe(res => console.log('filtered:', res));
    }
}

Here's the structure of a product object Here's the structure of a product object

Here's the structure of selectedFilters enter image description here

非常感谢您:-)。

评论