angular2의 목록에 검색 필터를 적용하는 방법은 무엇입니까?

Question

배열에 저장된 데이터 목록에 검색 필터를 구현하고 데이터 표에서 검색과 같은 검색 필터를 적용하고 싶습니다. 아래 그림과 같이 (name, address..etc) 필드는 고정되어 있지 않습니다.

는 어떻게하면 achive 수 있습니까?

Answer 1

DEMO

다른 필드로 필터링하려면 그냥 파이프에 추가 :

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

@Pipe({ 
    name: 'searchFilter' 
}) 
export class SearchFilter implements PipeTransform { 
    transform(items: any[], criteria: any): any { 

     return items.filter(item =>{ 
      for (let key in item) { 
      if((""+item[key]).toLocaleLowerCase().includes(criteria.toLocaleLowerCase())){ 
       return true; 
      } 
      } 
      return false; 
     }); 
    } 
} 

    @Component({ 
     selector: 'sites-component', 
     template: ` 
     <input #search (keyup)="0"> 
     <ul> 
      <li *ngFor="let site of (sites | searchFilter: search.value)">(...)</li> 
     </ul> 
     ` 
    }) 
    export class SitesComponent{ 
     sites : Array; 
    } 

하지 말자는 모듈에 파이프를 선언하는 것을 잊지.