Angular 4 FilterBy Pipe

Question

J'essaie d'émuler ce que dans AngularJS est OrderBy.

Étant donné ce type de tableau. J'ai besoin de filtrer les voitures par car_category.

[ 
    { 
    "car_category": 3, 
    "name": "Fusion", 
    "year": "2010" 
    }, 
    { 
    "car_category": 2, 
    "name": "Mustang", 
    "year": "2010" 
    }, 
    { 
    "car_category": 3, 
    "name": "Fiesta", 
    "year": "2010" 
    }, 
] 

Voici comment mon code ressemble à ce jour

car.component.html

<div *ngIf="products"> 
    <ul *ngFor="let product of products | filterBy: car_category"> 
    <li>{{car.name}}</li> 
    </ul> 
</div> 

car.component.ts

import { Component, OnInit } from '@angular/core'; 
import { CarService } from '../car.service'; 
import { ICars } from '../ICars'; 
import { FilterByPipe } from '../filter-by.pipe'; 

@Component({ 
    selector: 'app-home-page', 
    templateUrl: './car.component.html', 
    styleUrls: ['./car.component.css'] 
}) 
export class CarComponent implements OnInit { 
    cars: Array<ICars>; 
    errorMessage: string; 
    filteredCars: any; 
    car_category= 3; 

    constructor(private _carService: CarService) { } 
    ngOnInit() { 
    this._carService.getCars() 
     .subscribe(
     cars => this.cars = cars, 
     error => this.errorMessage = error 
    ); 
    } 

} 

filet- by.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'filterBy' 
}) 
export class FilterByPipe implements PipeTransform { 

    transform(value, args) { 
    if (!args[0]) { 
     return value; 
    } else if (value) { 
     return value.filter(item => { 
     // tslint:disable-next-line:prefer-const 
     for (let key in item) { 
      if ((typeof item[key] === 'string' || item[key] instanceof String) && 
      (item[key].indexOf(args[0]) !== -1)) { 
     return true; 
     } 
    } 
    }); 
} 
    } 

} 

Comment ma pipe a besoin d'être refactorisé?

MISE À JOUR Voici à quoi ressemble ma pipe maintenant. Notez que la voiture est un nombre et l'année est affichée sous la forme d'une chaîne

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'filterBy' 
}) 
export class FilterByPipe implements PipeTransform { 

    transform(value, args) { 
    if (!args[0]) { 
     return value; 
    } else if (value) { 
     return value.filter(item => { 
     // tslint:disable-next-line:prefer-const 
     for (let key in item) { 
      if ((typeof item[key] === 'number' || item[key] instanceof Number) && 
      (item[key].indexOf(args[0]) !== -1)) { 
     return true; 
     } 
    } 
    }); 
} 
    } 

} 

Answer 1

L'écriture de tubes génériques personnalisés peut être difficile. Si vous regardez le Angular 1 source code, vous comprendrez ce que je veux dire.

Par conséquent, je suggère d'utiliser une bibliothèque, telle que ng-pipes. Pour être honnête, je n'ai pas testé la version Angular 2, mais c'était assez pratique pour Angular 1.