I'm trying to show a page with all the products and a section with categories, but only the categories is rendering.

I don't see the products on the page.

The console shows the error:

```
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'

```

My code:

```
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() }))
        )
      );

```

Any suggestions to fix this?