在ngFor中使用自定义管道时出现错误 [英] got error when i used custom pipe in ngFor

问题描述

我只想将<input type='text'[(ngModel)]='listFilter' />值作为参数发送到我的自定义管道. 这是我的组件代码，其中包含产品列表，可以在html中毫无问题地显示它们:

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

这是我的pipe.ts:

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

当我在我的html中添加此管道时. iv出现以下错误

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

因为此代码:>我的html的<tr *ngFor='let product of products | productFilter:listFilter'>不会发送以下文本框值(<input type='text'[(ngModel)]='listFilter' />)来过滤管道！当我在管道代码中设置调试器时，我看到Argument值为未定义.

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.

这是我的html代码:

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> 

稍后添加:，当我在此行中使用直串而不是listFilter时:<tr *ngFor='let product of products | productFilter:"car"'>该参数将发送到管道及其工作.

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.

推荐答案

您的双向绑定字段在您的组件中不存在.

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

您应该定义它:

export class ProductListComponent {

listFilter: any = "";

并且正如我在args[0]之前的评论中所提到的，只能是args.

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

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

这篇关于在ngFor中使用自定义管道时出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！