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

我只想将<input type='text'[(ngModel)]='listFilter' />值发送到我的自定义管道作为参数。这是我的，它包含的产品列表中可以显示他们的HTML没有任何问题的组件代码：当我在ngFor中使用自定义管道时出现错误

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添加此管道。四，得到了以下错误

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

来源

2017-05-30 Iman Salehi

你只是过客值来管，也没有说法，你是过客，而你正试图为参数 –

取值@RahulSingh我认为它不是该问题的原因。当我使用一个直的字符串，而不是listFilter ...它的工作和参数将发送到管道 –

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

你应该把它定义：

export class ProductListComponent { 

listFilter: any = "";

和我args[0]在之前的评论中提到应该只是args。

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

来源

2017-05-30 05:59:23 echonax

我做到了，但仍然有同样的问题 –

我认为它没有不同.... args =未定义在调试 –

@ImanSalehi我已经在转码器 – echonax

你的文本框绑定到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; 
}

来源

2017-05-30 06:10:38

仍然存在问题 –

您可以验证是否添加支票如果'args'不是未定义的，则返回过滤器值。看起来listFilter没有在你的组件中用默认值定义，* ngFor尝试在listFilter中有一些字符串值之前过滤列表。 –

当我在这一行中使用直字符串而不是listFilter时：参数将发送到管道及其工作。 –

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

回答

相关问题