각도로 된 필터 구성 요소 데이터

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)을 장려합니다. 필터 :

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