过滤

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