Angular 角度2表格应用中的过滤器

我在angular 2中创建了一个简单的表格应用程序

现在，我的任务是在

标记中创建一个数据过滤器

<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>

我没有任何错误日志。当我在

中输入一些单词时，什么也没有发生。可能是语法错误

UPD：

这是模板的一部分：

<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>

Перечень объектов по теме
第一卷
第二卷
第三卷
{{list.name}
{{list.location}

您需要创建一个自定义管道来过滤数据。
1.为自定义管道创建新文件，例如：my filter.pipe.ts

1.1。在该文件中，需要从角度核心导入管道和管道变换

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。在主

模块.ts中

导入已创建的自定义管道

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

2.1。并将其添加到

声明中：

数组

declarations: [ MyFilterPipe ]

3。在

表.component.ts

类中添加以下内容：

listFilter: string = '';

4。在模板中添加一个输入字段，并使用

ngModel

进行双向数据绑定：

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

您可以在此处看到使用输入进行过滤的示例：

---

您想做什么？你们将如何过滤数据？@micronyks在标记中我写了一些符号，然后找到完整的单词。例如，编写一个-然后查找AlphaSo webapi是否返回正确的结果（json对象）？@micronyks my webapi仅返回数据json data使用*ngFor part更新代码。或者在您使用的代码中显示

列表

对象谢谢您的回答！但在plunker中，输入过滤器不起作用，欢迎使用！它对我有用。。。试着全屏打开它：错误页面->run.plnkr.co/plunks/qwsk86hHLbI26w3HVMdV，当我在输入中写入一些符号时，什么也没发生

declarations: [ MyFilterPipe ]

listFilter: string = '';

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

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