Блог

Главная - Вопросы по программированию - Как объединить данные, возвращаемые преобразователем, в вызов combineLatest?

Как объединить данные, возвращаемые преобразователем, в вызов combineLatest?

#angular #rxjs #observable #resolver

#angular #rxjs #наблюдаемый #распознаватель

Вопрос:

У меня есть распознаватель на странице для загрузки данных. Этот преобразователь возвращает Observable<Product[]>

Затем я объединяю поток из преобразователя с другим потоком, используя combineLatest.

Но проблема в том, что когда я объединяю потоки, я получаю сообщение об ошибке, в котором говорится, что мои потоки используются до инициализации. Я попытался поместить combineLatest в функцию и вызвать ее после получения данных из преобразователя. Затем у меня появляется сообщение об ошибке «фильтр не является функцией» для продуктов.вызов фильтра в combineLatest.

 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)
  }

Большое спасибо за любую помощь или предложения.

Комментарии:

1. похоже, вы могли бы сделать просто this.productsWithCategoriesResolved$.pipe(filter(Boolean)) .

Ответ №1:

combineLatest оператору требуются все наблюдаемые, и когда все наблюдаемые выдают значение хотя бы одно, он вызывает subscribe . Здесь у вас есть this.route.snapshot.data["resolvedData"] коллекция продуктов ( Product[] ).

Вы должны преобразовать filteredByCategoryProducts$ для хранения наблюдаемого Product[] , просто добавив of оператор для преобразования потока.

 import { combineLatest, of } from 'rxjs';

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

Комментарии:

1. Да! Большое спасибо Панкадж Паркар! Это работает! Я всего лишь новичок в наблюдаемых, так что еще раз спасибо!

Ответ №2:

Используйте данные, наблюдаемые в Activatedroute, вместо snapshot.data. Затем с помощью rxjs pluck operator вы можете извлечь нужные данные.

 this.productsWithCategoriesResolved$ = this.route.data.pipe(pluck('resolvedData'));
Метки: