Question

我正在Angular 2＆amp ;;中建立一个产品清单项目。想要使用自定义管道过滤＆＃39;。我已经在包括这里在内的许多网站上进行了研究，然后我发现管道现在在app.Module声明和声明中声明了。不在组件内部。但仍然无法显示我的应用程序＆amp;想知道导致我的项目无法工作的原因。

产品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; 
    }
    }

我使用竖线字符

在模板中过滤了产品列表

产品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 { }

如果有人可以帮我解决这个问题，我会很感激，因为我试图找到错过的东西。

Answer 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; 
    }
}

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

1 个答案: