如何过滤 Angular 中的类别 9

Question

I want to filter by categories in a Webshop. Actually I stuck with a tutorial from Mosh because I have no Error Message in Browser or Command Prompt but nothing is filtered or even showed. I am a absolute beginner in Angular and/or typescript so pls be kind^^ I tried to resolve the problem by my own for ages but it doesn´t work. Please help me out.

Thats my code:

products.component.ts:

export class ProductsComponent {

 products: Product[]= [];
 filteredProducts: Product[] = [];
categories$: Observable<any>;
category: string;
products$: Observable<any>;


 constructor(
    route: ActivatedRoute,
    productService: ProductService, 
    categoryService: CategoryService) {
    this.filteredProducts;

productService.getAll().subscribe (products => this.products);



//Shows Categories in View
    this.categories$ = categoryService.getAll();
    route.queryParamMap.subscribe(params => {
      this.category = params.get('category');
      this.categories$.subscribe(res => console.log (res)); //Console.log  5 Categories Observable



      //Setting the filtered Products Array
      this.filteredProducts = (this.category) ? 
       this.products.filter(p => {
         return p.category === this.category;
       }) : 
      this.products;
      console.log(this.filteredProducts); // Console.log FilteredProducts Array
    });

   }

 }

products.component.html:

<div class="row">
  <div class="col-3">
    <div class="list-group">


      <!-- Bei queryParams c.name auswählbare Kategorien / bei c.key nicht sowie bei c.$key nicht-->
      <a *ngFor="let c of categories$ | async "
      routerLink= "/"
      [queryParams]="{ category: c.name }"  
       class="list-group-item list-group-item-action"
       [class.active]="category === c.name">
        {{ c.name }}
      </a>
    </div>  
  </div>
  <div class="col-9">
    <div class="row">
      <ng-container *ngFor="let product of filteredProducts ; let i = index">
        <div class="col">
          <div class="card" style="width: 15rem;">
          <img [src]="product.imageUrl" class="card-img-top" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">{{ product.title }}</h5>
            <p class="card-text">{{ product.price | currency: 'EUR' }}</p>
            <a href="#" class="btn btn-primary">Add to Cart</a>
          </div>
        </div>
      </div>
      <div *ngIf="(i + 1) % 2 === 0" class="w-100"></div>
      </ng-container>
    </div>
  </div>
</div>

Answer 1

Here productService.getAll() method will take some time to fetch data from API, but route.queryParamMap will get executed immediately, while this observable is subscribed this.products object will be empty, that's why it is not able to filter. also you have not initialized this.products = products , in subscription. To fix all this you can implement it as below:

    export class ProductsComponent {

     products: Product[]= [];
     filteredProducts: Product[] = [];
    categories$: Observable<any>;
    category: string;
    products$: Observable<any>;


     constructor(
        route: ActivatedRoute,
        productService: ProductService, 
        categoryService: CategoryService) {
        this.filteredProducts = [];


        //Shows Categories in View
        this.categories$ = categoryService.getAll();
        route.queryParamMap.subscribe(params => {
          this.category = params.get('category');
            });


    productService.getAll().subscribe (products => {
                   this.products = products;
                             //Setting the filtered Products Array
                   this.filteredProducts = (this.category) ? 
                   this.products.filter(p => {
                      return p.category === this.category;
                   }) : this.products;
                   console.log(this.filteredProducts); // Console.log FilteredProducts Array
}); 
       }

     }

This is what I get if i console.log as follows: productService.getAll().subscribe (products => { console.log(products); this.products = products;});

and in the CMD:

Answer 2

well, there're some mistakes, the first is that you has

productService.getAll().subscribe (products => this.products);

must be

productService.getAll().subscribe (products => this.products=products);

But this not work becouse is an async call.

So, first change your productService "caching" the products. Your service like

products:any[]
getAll()
{
    return products?of(product):
           this.httpClient.get("your-url").pipe(
              tap(res=>this.products=res;
           )
}

We use of from 'rxjs' and tap from 'rxjs/operators'

This make that getProducts return an Observable of products. The first time is called, "products" are undefinned, so return the response of the httpClient.get. The tap make that procuts get the value, so the second time is called the variable products are used.

The second error is used the "constructor" use ngOnInit to subscribe to route.queryParamMap.

ngOnInit()
{
   this.route.queryParamMap.subscribe(params => {
      this.category = params.get('category');

      //here you get all the products
      this.productService.getAll().subscribe (
         products => this.products=products);
         //Setting the filtered Products Array
         this.filteredProducts = (this.category) ? 
             this.products.filter(p => {
              return p.category === this.category;
         }) : 
         this.products;
         console.log(this.filteredProducts); // Console.log FilteredProducts Array
      });
}

Well, another aproach is using switchMap and make that filteredProducts becomes an observable (then we use filteredProduct$ | async)

   this.filteredProduct$=this.route.queryParamMap.pipe(
     switchMap(params=>{
       this.category=params.get('category');
       return this.productService.getAll().pipe( 
          switchMap(products=>{
              const filteredProduct=!this.category?products:
                   products.filter(p => {
                      return p.category === this.category;
                    }) : 
             return of(filteredProduct):

          })
       )
     })
   ) 

NOTE: I don't check the code but this is the idea, I hope this can be usefull

Answer 3

The problem exist in filtering part, when you gonna filter your products on the base of category, then actually, it did not filter. The reason is that because your program did not get category of product in p.category . Because you are using latest angular as well as latest firebase. So you should use p.payload.val().category . Then it will compare your category with the this.category .

Try the given code

productService.getAll().pipe(switchMap(products => {
    this.products = products;
    return route.queryParamMap;
  }))
      .subscribe(params => {
      this.category = params.get('category');
      this.filterProducts = (this.category) ?
      this.products.filter(p => (p.payload.val().category)===this.category) :
      this.products;
    });

Answer 4

Solution is simple >_< I lost my 2 hours for solve. When we give queryParams by c.key - its value is like "bread" - with small letters, but our product.category value is with uppercase like "Bread" and so u must give value of category name - not category key Just change

THIS:

<a *ngFor="let c of categories$ | async" 
    routerLink="/"
    [queryParams]="{ category: c.key }"
    class="list-group-item list-group-item-action"
    [class.active] = 'category === c.key'
    >
    {{ c.payload.val().name }}
</a>

TO:

<a *ngFor="let c of categories$ | async" 
    routerLink="/"
    [queryParams]="{ category: c.payload.val().name }"
    class="list-group-item list-group-item-action"
    [class.active] = 'category === c.payload.val().name'
    >
    {{ c.payload.val().name }}
</a>

Answer 5

the correcte anser for the last version of angular is

products.component.ts:

import { switchMap } from 'rxjs/operators';
import { Product } from './../models/product';
import { Categorie } from './../models/categorie';
import { ActivatedRoute } from '@angular/router';
import { ProductService } from './../product.service';
import { Component, OnInit } from '@angular/core';
import { CategoryService } from '../category.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent {

products: Product[]= [];
filteredProducts: Product[] = [];
categories$: Observable<any>;
category: string;
products$: Observable<any>;

  constructor(
    route:ActivatedRoute,
    productService:ProductService, 
    categoryService:CategoryService) {
   productService
   .getAll().pipe(
   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;
   });`enter code here`
this.categories$ = categoryService.getAll();

     }

    }