2016-07-23 61 views
0

我在这个小项目上遇到了麻烦。 我想在我的html两个输入,他们必须从数据库中过滤一些数据。我管理一个过滤器(它的工作原理),但我不知道如何做第二个过滤器。 (我很抱歉在我的文件中没有使用英文,我希望它不会打扰你)。 这里是我的了:Angular2,使用两个输入来过滤数据

HTML文件

<div class="container"> 
    <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Broj Kreveta" [(ngModel)]="broj_kreveta"> 
      <input type="text" class="form-control" placeholder="Broj Kvadrata" [(ngModel)]="broj_kvadrata"> 
     </div> 
    </form> 
    <div class="col-lg-12"> 
     <br/>Rooms<br/> <br/> 
     <div *ngFor="#soba of sobe | SearchPipe:broj_kreveta"> 
      ID room: {{soba.id}} 
      <br/> 
      Category: {{soba.kategorija}} 
      <br/> 
      Room number: {{soba.broj_sobe}} 
      <br/> 
      Number of beds: {{soba.broj_kreveta}} 
      <br/> 
      sqm: {{soba.broj_kvadrata}} 
      <br/><br/> 
     </div> 
    </div> 
</div> 

search.ts

import {Pipe} from 'angular2/core'; 

@Pipe({ 
    name: 'SearchPipe' 
}) 

export class SearchPipe { 
    transform (value, [queryString]) { 
     if (value == null) { 
      return null; 
     } 
     console.log('transform'); 
     return value.filter(item=>item.broj_kreveta.toLowerCase().indexOf(queryString.toLowerCase()) !== -1); 
    } 
} 

回答

1

你可以在你的展位管参数:

{{ myData | myPipe: arg1:arg2:arg3... }} 

和管道定义:

export class MyPipe implements PipeTransform {  
    transform(value:any, arg1:any, arg2:any, arg3:any):any { 
    }