无法在 Angular 2 中完成自定义过滤器管道答案

【问题标题】：Unable to complete a Custom Filter Pipe in Angular 2无法在 Angular 2 中完成自定义过滤器管道
【发布时间】：2016-12-18 09:40:33
【问题描述】：

我正在 Angular 2 中构建产品列表项目，并希望使用自定义管道来“过滤”。我在包括这里在内的许多站点进行了研究，然后我发现管道现在是在 app.Module 声明中声明的，而不是在组件内部。但仍然无法显示我的应用程序并想知道是什么导致我的项目无法运行。

product-filter.pipe.ts

    import { PipeTransform, Pipe } from '@angular/Core';
    import { IProduct } from './product';

    @Pipe({
    name: 'productFilter'

    })

    export class ProductFilterPipe implements PipeTransform {

    transform(value: IProduct[], args: string[]): IProduct[] {
        let filter: string = args[0] ? args[0].toLocaleLowerCase() : null;
        return filter ? value.filter((product: IProduct)  =>
            product.productName.toLocaleLowerCase().indexOf(filter) != -1) :    value; 
    }
    }

我已经使用管道字符过滤了模板中的产品列表

product-list.component.html

     <div class='col-md-2'>Filter by:</div>
                <div class='col-md-4'>
                    <input type='text' 
                     [(ngModel)]='listFilter' />
                </div>
            </div>
            <div class='row'>
                <div class='col-md-6'>
                    <h3>Filtered by: {{listFilter}} </h3>
                </div>
            </div>
            <div class='table responsive'>
                <table class='table' *ngIf='products && products.length'>
                    <thead>
                        <tr>
                            <th>
                                <button class='btn btn-primary'
                                    (click)='toggleImage()'>
                                    {{showImage ? 'Hide' : 'Show'}} Image 
                                </button>
                            </th>
                            <th>Product</th>
                            <th>Code</th>
                            <th>Available</th>
                            <th>Price</th>
                            <th>5 Star Rating</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor= 'let product of products |  productFilter:listFilter'> 
                            <td>

我的 app.module 文件带有管道声明。

app.module.ts 文件

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { ProductListComponent } from './products/product-list.Component';

    import { ProductFilterPipe } from './products/product-filter.pipe';

    import { AppComponent }  from './app.component';

    @NgModule({
    imports: [ BrowserModule,FormsModule ],
    declarations: [ AppComponent,ProductListComponent,ProductFilterPipe],
    bootstrap: [ AppComponent ]
    })
    export class AppModule { }

如果有人能帮我解决这个问题，我将不胜感激，因为我正试图找出我是否遗漏了什么。

【问题讨论】：

请发布代码而不是图片。还要检查浏览器控制台是否有任何错误。
确保您的管道在包含您的管道的模块上导出，并将该模块导入您要使用管道的模块上。
@sanket 代码已发布。
浏览器控制台有错误吗？
尝试在product-filter.pipe.ts 中将@angular/Core 更改为@angular/core 错误地使用了大写的C。

标签： angular

【解决方案1】：

试试这个代码

export class ProductFilterPipe implements PipeTransform {
    transform(value: IProduct[], filterBy: string): IProduct[] {
        filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
        return filterBy ? value.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
    }
}

而不是

export class ProductFilterPipe implements PipeTransform {    
    transform(value: IProduct[], args: string[]): IProduct[] {
        let filter: string = args[0] ? args[0].toLocaleLowerCase() : null;
        return filter ? value.filter((product: IProduct)  =>
            product.productName.toLocaleLowerCase().indexOf(filter) != -1) :    value; 
    }
}

【讨论】：