Question

我想根据用户输入的文字过滤我的表格列。我正在使用以下管道，

import {Pipe, PipeTransform} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/filter';

@Pipe({
    name: "search"
})
export class SearchPipe implements PipeTransform {
    searchTerms: Map<string, string> = new Map<string, string>();
    key: string;
    term: string = "*";

    transform(input, [colIndex, term, key]) {
        console.log("start of search " + term + " key:" + key);
        this.key = key;
        this.term = term;

        if (this.term == '*') {
            return input;
        } else {

             input.filter(
                function(data) {
                    data.forEach(
                        e=> {
                            console.log("filtering data " + e[key]+" result is : "+e[key].contains(term));
                            return e[key].contains(term);
                        }
                    )
                }
            ).subscribe(
                function(err) {
                    console.log('Error: %s', err);
                },
                function() {
                    console.log('Completed');
                }
              )


        }
    }

}

在我的html页面中，

<tr *ngFor="#column of (tableData.columns | search:columnIndex:filterTerm:columnKey | async )" (click)="onRowSelect(column)">
            <td *ngFor="#key of column | jsonIterator">{{column[key]}}</td>
        </tr>

tableData.columns是Observable类型，我从json文件中获取内容为，

[{"Component ID":"1","Component Type":"abc","Label Value":"user ID","Tool Tip Value":"please enter user ID"},
{"Component ID":"2","Component Type":"oit","Label Value":"user name","Tool Tip Value":"please enter user name"}
]

'term'是输入的文本，将根据json中'key'的值进行搜索。 JsonIterator是我的另一个管道，我可以从我的json中获取密钥

当用户输入文本时，我的数据表会被清除。我错过了什么？

并且我的方法也正确吗？由于我是角度js 2的新手，我不知道实现这些组件时遵循的惯例。我的意思是这是用户过滤可观察的正确方法，还是应该使用地图或其他东西？

列数据填充为

this.tableBean.columns = this.http.get('appLiteral.json')
    .map(res => res.json());

Answer 1

我会恢复您在ngFor中应用过滤器的顺序。我会把异步管道放在observable之后：

<tr *ngFor="#column of (tableData.columns | async |search:columnIndex:filterTerm:columnKey)" (click)="onRowSelect(column)">

从您的自定义管道中删除使用可观察的api。

实际上，当从observable收到数据时，将使用这些数据再次调用管道。您将能够在自定义管道中过滤它们。

您的代码的问题是您在自定义管道中的subscribe方法中没有定义任何内容。所以你的管道什么都没有返回（没有数据）......

如果您真的想利用自定义管道中的observable，可以查看此链接：

https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/async_pipe.ts

可观察的滤波器angularjs 2

1 个答案: