滤波器输入在角2

Question

如何写一些@Pipe用于过滤（在<input>标签）在表中的数据？

<tr *ngFor='let list of lists'> 
     <td><input type="" name="" value=""></td> 
     <td>{{ list.name }}</td> 
     <td>{{ list.location }}</td> 
     <td>{{ list.type_id }}</td> 
    <tr> 

的数据，我从API获得与HTTP服务：

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

UPD：

这是我的服务组件：

import {Injectable} from '@angular/core'; 
import {Http, Headers, RequestOptions} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 

import 'rxjs/add/operator/map' 

@Injectable() 
export class TableComponentService{ 
    private _url = 'http://101.496.222.511:8080/api/v1/10'; 

    constructor(private _http: Http) { 

    } 

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

} 

，这是一个表组件

import { Component, OnInit } from '@angular/core'; 
import { TableComponentService } from './table.service'; 

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

    constructor(private _service: TableComponentService) { 

    } 

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

} 

Answer 1

相反管的使用keyup事件通过使用可变

例

<tr *ngFor='let list of lists'> 
     <td><input type="" name="" value="" (keyup)="getServices()" > 
     <span *ngFor='let name of names'>{{name }}</span> 
     </td> 
     <td>{{ list.name }}</td> 
     <td>{{ list.location }}</td> 
     <td>{{ list.type_id }}</td> 
<tr> 


names:string[]; 
getServices(): Observable<any> { 
    this.names=this._http.get(this._url) 
     .map(res => res.json()); 
} 

EDIT调用getservices（）和存储在一个变量接收到的值，并显示结果，无论你想： -

使_Service公众构造

constructor(public_service: TableComponentService)

然后在HTML

<input type="" name="" value="" (keyup)="_service.getServices()" >