角のフィルターコンポーネントデータ

Question

私のコンポーネントは場所のリストを返します。さて、私は特定のカテゴリ（食べる、見て、眠る...）に基づいて場所をフィルタリングできるようにしたいと思います。

フィルタ機能用の新しいコンポーネントを作成する必要がありますか？リストをどのようにフィルタリングできますか？

マイデータ（JSON-サーバー）は次のようになります。私のコンポーネントから

[ 
    { 
    "id": 1, 
    "name": "Los Pollos Hermanos", 
    "slug": "los-pollos-hermanos", 
    "category": "eat", 
    "address": "Street 21", 
    "description": "Lorem ipsum", 
    "top": true 
    }, 
    { 
    "id": 2, 
    "name": "Savoy Wine Bar & Grill", 
    "slug": "savoy-wine-bar-grill", 
    "category": "see", 
    "address": "Street 5", 
    "description": "Lorem ipsum", 
    "top": false 
    } 
] 

エキス：

<nav>  
    <span *ngFor="let category of categories"> 
    <a routerLink='/category/{{category}}'> 
     {{ category }} 
    </a> 
    </span>  
</nav> 

<ul class="places"> 
    <li *ngFor="let poi of pois"> 
    <a routerLink='/detail/{{poi.slug}}'> 
     <h3>{{poi.name}}</h3> 
    </a> 
    </li> 
</ul> 

エキスから：私のcomponent.htmlから

categories: string[] = ['eat', 'sleep']; 

    constructor(private poiService: PoiService, private http: HttpClient) {} 

    ngOnInit() { 
    this.getPois(); 
    } 

    getPois(): void { 
    this.poiService.getPois().subscribe(pois => { 
     this.pois = pois; 
    }); 
    } 

エキス私のサービス：

constructor(private http: HttpClient) {} 

    getPois(): Observable<Poi[]> { 
    return this.http.get<Poi[]>(API); 
    } 

Answer 1

あなたは本当に配列をフィルタリングするためのコンポーネントを必要としません。あなたは、データが複雑さに応じて、別の場所で使用されようとしている場合は、データを保存/ /セットを取得するサービスを検討する必要があります

このような

let seeArray = originalArray.filter(item => item.category === 'see'); 

Answer 2

ものを使用しますが、フィルタリング用として、ということを覚えていますAngularはJSの基本を奨励します。この場合、Array.filter：

let filteredPOIs = this.pois.filter(poi => poi.category === 'eat');