Angular2多个自定义管道

时间:2016-06-10 09:04:35

标签: angular angular2-pipe

我正在使用es5构建angular2应用程序。我有一个屏幕,我有两个搜索输入字段来过滤两个不同的列表。

为此,我已经定义了两个不同的管道,如下所述

(function(app) {
    app.filterPipe1 = ng.core.Pipe({
        name : "filter1",
        pure:true
    }).Class({
        constructor : function() {
        }, // <<< ---
        transform : function(values, args) {
        return values.filter(function(value) {
                    return value.title.toLowerCase().startsWith(args[0].toLowerCase());
                });
        }
    });
})(window.app || (window.app = {}));


(function(app) {
    app.filterPipe2 = ng.core.Pipe({
        name : "filter2",
        pure:true
    }).Class({
        constructor : function() {
        }, // <<< ---
        transform : function(values, args) {


                return values.filter(function(value) {
                    return value.title.toLowerCase().startsWith(args[0].toLowerCase());
                });

        }
    });
})(window.app || (window.app = {}));

component1.js

app.component1 = ng.core
        .Component(
                {
                    directives : [ ng.router.ROUTER_DIRECTIVES,
                            app.componenttest ],
                    pipes : [ app.filterPipe1,app.filterPipe2 ],
                    templateUrl : 'test1.html'
                })

我在运行时遇到错误&#34;找不到管道&#34;

同样有趣的是当我从组件中的管道中删除任何一个声明时,它正在工作。

更新

在html中使用过滤器,如下所示

    <input type="text" placeholder="Search"
                                            [(ngModel)]="inputSearch1">

<li
                                        *ngFor="#category of categoryList |  filter1:inputSearch1 #i=index">





    <input type="text" placeholder="Search"
                                            [(ngModel)]="inputSearch2">

<li
                                        *ngFor="#objective of objectiveList |  filter2:inputSearch2 #i=index">

有人遇到过这个问题吗?

0 个答案:

没有答案