带有过滤器数组的 Rxjs 过滤器可观察

Question

我在这里是因为我在使用 Rxjs 进行过滤时遇到问题。 我正在尝试使用一系列过滤器过滤可观察到的产品...

让我解释一下，我想将过滤结果设置为过滤产品。 对于过滤，我必须检查，对于每个过滤器，产品的过滤器数组是否包含过滤器的名称，以及产品值数组是否包含过滤器 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));
    }
}

这是产品对象的结构

这里是 selectedFilters 的结构

提前非常感谢您:-)。

Answer 1

这是我得到的错误。以及存在错误的行。

Answer 2

您的代码看起来不错，但可以稍作修改。 首先，我会清理谓词，您可以使用 lodash intersectionWith 函数来交叉两个具有不同值的数组。
此外，您可以使用mergeAll 运算符逐个过滤器迭代过滤器，这使得它看起来不那么嵌套。

总体上应该是这样的：

products$
  .pipe(
    mergeAll(),
    filter(
      product =>
        _.intersectionWith(
          product.filters,
          selectedFilters,
          (filter, [name, id]) =>
            filter.name.toLowerCase() === name && filter.values.includes(id)
        ).length > 0
    )
  )
  .subscribe(console.log);

您可以运行完整的示例代码here

Answer 3

我认为您必须将 selectedFilters 更改为 BehaviorSubject 并将其与 products$ observable 一起使用。有combineLatest 函数可以监听多个可观察对象的最新值并返回一个数组

示例

window.products$ = rxjs.of([
    {
        id: 1,
        name: "product 1",
        category: {
            id: 1,
            name: 'test'
        },
        filters: [
            {
                name: "test1",
                values: [1]
            }
        ],
        url: '/assets/test1.png'
    },
    {
        id: 2,
        name: "product 2",
        category: {
            id: 1,
            name: 'test'
        },
        filters: [
            {
                name: "test2",
                values: [2]
            }
        ],
        url: '/assets/test2.png'
    }
])
window.filteredProducts$ = null;
window.selectedFilters = new rxjs.BehaviorSubject([])

function filterProducts() {
    filteredProducts$ = rxjs.combineLatest(products$, selectedFilters)
        .pipe(
            rxjs.operators.map(
            ([products, filters]) => products.filter(
                product =>
                    product.filters.some(filter => filters.some(([filterName]) => filterName === filter.name.toLowerCase())
                        && filter.values.some(value => filters.some(([, filterId]) => filterId === value))
                    )
            )
        )
    );
    filteredProducts$.subscribe(res => console.log('filtered:', res));
}

filterProducts()
window.selectedFilters.next([...window.selectedFilters.value, ['test1', 1]]);
window.selectedFilters.next([...window.selectedFilters.value, ['test2', 2]]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>