如何将解析器返回的数据组合到 combineLatest 调用中？

Question

我在页面上有一个解析器来加载数据。此解析器 returns 一个 Observable<Product[]>

然后我使用 combineLatest 将来自解析器的流与另一个流合并。

但问题是，当我合并流时，我收到一条错误消息，提示我的流在初始化之前已被使用。我试图将 combineLatest 放入一个函数中，并在从解析器获取数据后调用它。然后我在 combineLatest.

的 products.filter 调用中收到错误消息“filter is not a function”

categorySelectedSubject = new Subject<number>();
categorySelectedAction$ = this.categorySelectedSubject.asObservable();

ngOnInit(): void {
  this.productsWithCategoriesResolved$ = this.route.snapshot.data["resolvedData"]
}

this.filteredByCategoryProducts$ = combineLatest([
      this.productsWithCategoriesResolved$,
      this.categorySelectedAction$
        .pipe(
          startWith(0)
        )
    ])
    .pipe(
      map(([products, selectedCategoryId]) =>
        products.filter(p => selectedCategoryId ? p.categoryId === selectedCategoryId : true)
      ),
      catchError(err => {
        this.errorMessage = err;
        return EMPTY;
      })
    );

 onCategorySelected(categoryId: string){
    this.categorySelectedSubject.next(+categoryId)
  }

非常感谢您的帮助或建议。

Answer 1

combineLatest 运算符需要所有可观察对象，并且当所有可观察对象至少发出一个值时，它会调用订阅。在这里，您 this.route.snapshot.data["resolvedData"] 持有产品集合 (Product[])。

您必须通过添加 of 运算符来转换流来转换 filteredByCategoryProducts$ 以保存 Product[] 的 Observable。

import { combineLatest, of } from 'rxjs';

this.filteredByCategoryProducts$ = of(this.route.snapshot.data["resolvedData"]);

Answer 2

在 Activatedroute 上使用 data observable 而不是 snapshot.data。然后使用 rxjs pluck operator 你可以提取所需的数据。

this.productsWithCategoriesResolved$ = this.route.data.pipe(pluck('resolvedData'));

如何将解析器返回的数据组合到 combineLatest 调用中？

How to combine data returned by a resolver into a combineLatest call?

resolver

observable

rxjs

angular