got error when i used custom pipe in ngFor

问题

I just want to send <input type='text'[(ngModel)]='listFilter' /> value to my custom pipe as parameter. this is my component code that contains list of products an can show them in html without any problem :

    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": "",
        }
    ];
}

this my 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[] {
        debugger
        let filter: string = args[0] ? args[0].toLocaleLowerCase() : null;
        return filter ? value.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().indexOf(filter) != -1) : value;
    }
}

when i add this pipe in my html. iv got following error

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

because this code:> <tr *ngFor='let product of products | productFilter:listFilter'> of my html doesn't send following textbox value( <input type='text'[(ngModel)]='listFilter' /> ) to filter pipe! when i set the debugger inside my pipe code i see the Argument value as undefined.

and this is my html code:

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

Added Later: when i use straight string instead of listFilter in this line: <tr *ngFor='let product of products | productFilter:"car"'> the parameter will send to pipe and its working.

回答1:

Your two-way binding field does not exist in your component.

You should define it:

export class ProductListComponent {

listFilter: any = "";

and as I've mentioned in the comments before args[0] should only be args.

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

回答2:

Your text box is bound to listFilter which is a string and you are expecting an array of strings in the pipe's transform method. Should it be not expecting a string here as well?

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

来源：https://stackoverflow.com/questions/44254511/got-error-when-i-used-custom-pipe-in-ngfor