ngForでカスタムパイプを使用したときにエラーが発生しました

Question

<input type='text'[(ngModel)]='listFilter' />の値をパラメータとしてカスタムパイプに送信したいだけです。

import { Component } from '@angular/core'; 
import { IProduct } from './product'; 


@Component({ 
    selector: 'pm-products', 
    templateUrl: 'app/products/product-list.html', 

}) 
export class ProductListComponent { 

    pageTitle: string = 'Product List'; 
    IText: string; 
    products: IProduct[] = [ 
     { 
      "productId": 2, 
      "productName": "Garden Cart", 
      "productCode": "GDN-0023", 
      "releaseDate": "March 18, 2016", 
      "description": "15 gallon capacity rolling garden cart", 
      "price": 32.99, 
      "starRating": 4.2, 
      "imageUrl": "app/assets/images/garden_cart.png", 
      "IText": "", 
     }, 
     { 
      "productId": 5, 
      "productName": "Hammer", 
      "productCode": "TBX-0048", 
      "releaseDate": "May 21, 2016", 
      "description": "Curved claw steel hammer", 
      "price": 8.9, 
      "starRating": 4.8, 
      "imageUrl": "app/assets/images/rejon_Hammer.png", 
      "IText": "", 
     } 
    ]; 
} 

この私のpipe.ts：：これは何の問題もなくHTML形式でそれらを表示することができた製品のリストが含まれて私のコンポーネントのコードがある

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

@Pipe({ 
    name: 'productFilter' 
}) 
export class ProductFilterPipe implements PipeTransform { 

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

私は私のhtmlでこのパイプを追加

。 >私のhtmlの <tr *ngFor='let product of products | productFilter:listFilter'>パイプをフィルタリングするために、次のテキストボックス値（ <input type='text'[(ngModel)]='listFilter' />）を送信しません：このコードので、IVは、エラー

TypeError: Cannot read property '0' of undefined in ng:///AppModule/ProductListComponent.ngfactory.js 

次です！パイプコード内にデバッガを設定すると、Argumentの値は未定義です。

と、これは私のhtmlコードです：私はこのラインに代わりlistFilterのまっすぐな文字列を使用する場合：後で追加

<input type='text'[(ngModel)]='listFilter' /> 
     <table class='table' *ngIf='products && products.length'> 
      <thead> 
       <tr> 
        <th> 
         <button class='btn btn-primary'> 
          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></td> 
        <td>{{ product.productName }}</td> 
        <td>{{ product.productCode }}</td> 
        <td>{{ product.releaseDate }}</td> 
        <td>{{ product.price }}</td> 
        <td>{{ product.starRating }}</td> 
       </tr> 

      </tbody> 
     </table> 

<tr *ngFor='let product of products | productFilter:"car"'>パラメータは、パイプとその作業に送信されます。

Answer 1

双方向バインディングフィールドがコンポーネントに存在しません。

あなたはそれを定義する必要があります。

export class ProductListComponent { 

listFilter: any = ""; 

と私はargs[0]前のコメントで述べてきたようにのみargsでなければなりません。

Plunker：http://plnkr.co/edit/jOYWO5xG6kbbjdnucrdY?p=preview

Answer 2

あなたのテキストボックスが文字列であるlistFilterにバインドされ、あなたは、パイプの変換方法で文字列の配列を期待しています。ここでも文字列を期待してはいけませんか？あなただけのパイプに値を渡している

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