過濾

Question

I`ve在角2

創建了一個簡單的表格應用而現在，我的任務就是在<input>標籤創建數據的過濾器。

<tr> 
     <td><input type="" name="" value=""></td> 
     <td><input type="" name="" value=""></td> 
     <td></td> 
     <td></td> 
     <td><input type="" name="" value="" size="7" (keyup)="_service.getServices()"></td> 
</tr> 

我得到的數據與此：

private _url = 'http://150.746.21.851/api/v1/'; 

constructor(private _http: Http) { 

} 

getServices(): Observable<any> { 
    return this._http.get(this._url) 
     .map(res => res.json()) 
} 

這是_service

constructor(public _service: TableComponentService) { 

    } 

    ngOnInit() { 
     this._service.getServices() 
      .subscribe(lists => this.lists = lists) 
    } 

我沒有錯誤的任何記錄。當我在<input>輸入一些單詞時，沒有任何反應。也許在語法上的錯誤？

UPD：

@Component({ 
selector: 'tablecomponent', 
templateUrl: 'app/table.template.html', 
providers: [TableComponentService] 
}) 
export class TableComponent implements OnInit { 
lists: any[]; 

constructor(public _service: TableComponentService) { 

    } 

    ngOnInit() { 
     this._service.getServices() 
      .subscribe(lists => this.lists = lists) 
    } 

} 

，這是模板的一部分：

<table class="table table-bordered table, table table-hover"> 
     <thead> 
      <tr> 
       <td colspan="10" align="center">Перечень объектов по теме</td> 
      </tr> 
      <tr> 
       <th>vol 1</th> 
       <th>vol 2</th> 
       <th>vol 3</th> 
      </tr> 
      <tr style="background: #F5F5F5"> 
       <td><input type="" name="" value=""></td> 
       <td><input type="" name="" value=""></td> 
       <td></td> 
       <td></td> 
       <td><input type="" name="" value="" size="7" (keyup)="_service.getServices()"></td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor='let list of lists'> 
       <td contenteditable="true">{{ list.name }}</td> 
       <td contenteditable="true">{{ list.location }}</td> 
      </tr> 
     <tbody> 

Answer 1

您需要創建一個自定義的管道來過濾數據。
1.自定義管道創建一個新文件前：我-filter.pipe.ts

1.1。在這個文件裏面，你需要從角度核心導入Pipe和PipeTransform。

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

1.2。給您的定製管道命名

@Pipe({ 
     name: 'myListFilter' 
}) 

1.3。實現PipeTransform界面和使用方法transform()改造的價值，並將其返回

export class MyFilterPipe implements PipeTransform { 
     transform(value: lists[], args: string[]): lists[] { 
      // your javascript code goes here 
     } 
} 

2.在主module.ts導入您已經創建

import { MyFilterPipe } from './my-filter.pipe' 

2.1自定義管道。並把它添加到declarations:陣列

declarations: [ MyFilterPipe ] 

3.在你的table.component.ts類補充一點：

listFilter: string = ''; 

4.在您的模板添加一個輸入字段，並使用ngModel爲雙向數據綁定：

<input type="text" [(ngModel)]="listFilter" /> 

4。ANF最後使用|運營商定製的管適用於您的元素：

<tr *ngFor='let list of lists | myListFilter: listFilter'> 

你可以看到這裏的輸入濾波的實例： http://plnkr.co/qwsk86hHLbI26w3HVMdV