カスタムフィルタパイプを角2で完成できません

Question

私は角度2でプロダクトリストプロジェクトを作成しています&カスタムパイプを使用して 'フィルタ'したいと考えています。私はここを含む多くのサイトで研究しており、パイプがapp.Module宣言で宣言されていることがわかりました&コンポーネント内にはありません。しかし、まだ私のアプリケーションを表示することができません&私のプロジェクトが動作しない原因に疑問を抱く。

製品-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> 

マイアプリを使用してテンプレートに製品リストをフィルタリングしていますパイプの宣言を伴う.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[], 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; 
    } 
}