角4 FilterByパイプ

Question

私はAngularJSで何をエミュレートしようとしています。OrderByです。

与えられたこの種類の配列。私はcar_categoryで車をフィルタリングする必要があります。ここで

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

私のコードは、これまで

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

} 

パイプをどのようにリファクタリングする必要がありますか？

更新 これは私のパイプが今見える方法です。車は数字であり、年は文字列として表示されます。

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

カスタム汎用パイプの作成は難しい場合があります。 Angular 1 source codeを見ると、私の言うことが分かります。

したがって、ng-pipesのようなライブラリを使用することをお勧めします。正直言って私はAngular 2のバージョンをテストしていませんが、Angular 1の場合は非常に便利でした。