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

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

这是我的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

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

你应该定义它：

$ awk 'val>0 {range=$2-val; printf "%d,l-%s\n", range, label } {label=$1; val=$2}' inp

正如我在export class ProductListComponent { listFilter: any = "";之前的评论中提到的应该只是args[0]。

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

当我在ngFor中使用自定义管道时出错

2 个答案: