在 ngFor 中使用自定义管道时出现错误

Question

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

    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:

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 出现以下错误

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' /> ) 发送到过滤器管道！当我在我的管道代码中设置调试器时，我看到参数值未定义。

这是我的 html 代码：

 <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"'> 参数将发送到管道及其工作。

Answer 1

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

你应该定义它：

export class ProductListComponent {

listFilter: any = "";

正如我在之前的评论中提到的 args[0] 应该只是 args.

笨蛋：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;
}

在 ngFor 中使用自定义管道时出现错误

got error when i used custom pipe in ngFor

ngfor

angular