Подписка через SwitchMap на Angular 5

Question

Я пытаюсь показать страницу со всеми продуктами и раздел с категориями, но отображается только категория.

Я не вижу продукты на странице.

Консоль показывает ошибку:

main.653279d3d097093b55e7.js:1 ERROR Error: InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 't'

Мой код:

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';
import { Observable, Subscription } from 'rxjs';
import { AngularFireList } from 'angularfire2/database';
import { map, switchMap, filter } from 'rxjs/operators';
import { CategoryService } from '../category.service';
import { ActivatedRoute } from '@angular/router';
import { Product } from '../models/product';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  products: any = {};
  productsRef: AngularFireList<any>;
  filteredProducts;
  categories: Observable<any>;
  categoriesRef: AngularFireList<any>;
  category;

  constructor(route: ActivatedRoute, private productService: ProductService, private categoryService: CategoryService) {

    this.productsRef = productService.getAll();

    this.products = this.productsRef.snapshotChanges().pipe(
      map(changes =>
        changes.map(c => ({key: c.payload.key, ...c.payload.val() }))
      )).switchMap (products => {
        this.products = products;
        return route.queryParamMap;
      }).subscribe (params => {
        this.category = params.get('category');
        this.filteredProducts = (this.category) ?
          this.products.filter(p => p.category === this.category) : this.products;
      });

    this.categoriesRef = this.categoryService.getAll();

    this.categories = this.categoriesRef.snapshotChanges().pipe(
        map(changes =>
          changes.map(c => ({key: c.payload.key, ...c.payload.val() }))
        )
      );

Есть предложения, чтобы это исправить?

Answer 1

switchMap подпись предполагает, что эта функция должна возвращать Observable<any>:

public switchMap(project: function(value: T, ?index: number): ObservableInput, resultSelector: function(outerValue: T, innerValue: I, outerIndex: number, innerIndex: number): any): Observable

Пока вы возвращаете route.queryParamMap, который не является типом ObservableInput.Попробуйте заменить эту строку:

return route.queryParamMap;

на эту:

return Observable.from(route.queryParamMap);

Редактировать

Поскольку мой первый ответ был недействительным из-за моей ошибки, я попытался повторнонапишите свой strem тому, который не использует pipe и использует switchMap в начале, чтобы предотвратить повторный запрос неполного strem.

this.products = this.productsRef.snapshotChanges()
.switchMap((products: AngularFireAction<DatabaseSnapshot>[]) => {
    return Observable.of(products); // Just re-emit things to guard re-query interruption
})
.map((snap: AngularFireAction<DatabaseSnapshot>[]) => { /* Do data manipulation */
  let mappedProducts = snap.map((s: AngularFireAction<DatabaseSnapshot>) => {
    return {key: s.payload.key, ...c.payload.val() }
  })
  return mappedProducts;
})
.do((mappedProducts: any) => { /* Side effects */
  this.products = mappedProducts;
})
.concatMap(mappedProducts => {
  return route.queryParamMap;
})
.subscribe (params => {
  this.category = params.get('category');
  this.filteredProducts = (this.category) ?
    this.products.filter(p => p.category === this.category) : this.products;
});

Answer 2

Вы должны использовать pipe()

 this.products = this.productsRef.snapshotChanges().pipe(
      map(changes =>
        changes.map(c => ({key: c.payload.key, ...c.payload.val() }))
      ),
switchMap (products => {
        this.products = products;
        return route.queryParamMap;
      })
).subscribe (params => {
        this.category = params.get('category');
        this.filteredProducts = (this.category) ?
          this.products.filter(p => p.category === this.category) : this.products;
      });