Question

我在角度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.为自定义管道创建新文件 ex：my-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

过滤角度2表应用程序

1 个答案: