Angular2 .filter не является функцией

Question

Хотя следующие учебник для фильтрации данных с помощью angular2 трубы, получил под ошибкой

EXCEPTION: Error in ./PmProductsComponent class PmProductsComponent - inline template:20:28 caused by: value.filter is not a function 

ли кто-нибудь может пролить свет на то, почему value.filter не является функцией. Кажется, что он соответствует синтаксису учебников, я думаю, возможно, появилось обновление, требующее чего-то другого?

PIPE

import {PipeTransform, Pipe} from '@angular/core'; 
import {IProduct} from './product'; 

@Pipe({ 
    name: 'productFilter' 
}) 
export class ProductFilterPipe implements PipeTransform{ 
    transform(value:IProduct[], filterBy:string): IProduct[] { 
     filterBy = filterBy ? filterBy.toLocaleLowerCase(): null; 

     return filterBy ? value.filter((product: IProduct)=> 
     product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1): value; 
    } 

} 

Компонент:

import { Component, OnInit } from '@angular/core'; 
import {IProduct} from './product'; 

@Component({ 
    selector: 'app-pm-products', 
    templateUrl: './pm-products.component.html', 
    styleUrls: ['./pm-products.component.css'] 
}) 
export class PmProductsComponent implements OnInit { 
    pageTitle: string = 'Product List'; 
    imageWidth: number = 50; 
    imageMargin: number = 2; 
    showImage: Boolean = false; 
    listFilter: string = 'cart'; 
    products: IProduct[] = [ 
     { 
     "productId": 1, 
     "productName": "Leaf Rake", 
     "productCode": "GDN-0011", 
     "releaseDate": "March 19, 2016", 
     "description": "Leaf rake with 48-inch wooden handle.", 
     "price": 19.95, 
     "starRating": 3.2, 
     "imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png" 
    }, 
    { 
     "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": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png" 
    }, 
    ] 

    toggleImage() : void { 
    this.showImage = !this.showImage; 

    } 
    constructor() { } 

    ngOnInit() { 
    console.log('In OnInit'); 
    } 

} 

HTML

<div class = 'panel panel-primary'> 
    <div class = 'panel-heading'> 
    {{pageTitle}} 
    </div> 
    <div class ='panel-body'> 
      <div class = 'row'> 
       <div class = 'col-md-2'> Filter by:</div> 
       <div class = 'col-md-4'> 
        <input type = 'text' 
        [(ngModel)]='listFilter'/> 
       </div> 
      </div> 
      <div class = 'row'> 
       <div class = 'col-md-6'> 
        <h3>Filtered by:{{listFilter}}</h3> 
       </div> 
      </div> 

      <div class = 'table-responsive'> 
       <table class = 'table' 
          *ngIf='products && products.length | productFilter:listFilter'> 
        <thead> 
         <tr> 
          <th> 
           <button class = 'btn btn-primary' 
           (click) = 'toggleImage()'> 
           {{showImage ? 'Hide' : 'Show'}} Image 
           </button> 
          </th> 
          <th>Products</th> 
          <th>Code</th> 
          <th>Available</th> 
          <th>Price</th> 
          <th>5 Star Rating</th> 

         </tr> 
        </thead> 
        <tbody> 
         <tr *ngFor='let item of products'> 
          <td> 
           <img *ngIf = 'showImage' [src] = 'item.imageUrl' 
            [title] = 'item.productName' 
            [style.width.px]= 'imageWidth' 
            [style.margin.px]= 'imageMargin' 
          > 
          </td> 
          <td>{{item.productName}}</td> 
          <td>{{item.productCode | lowercase}}</td> 
          <td>{{item.releaseDate}}</td> 
          <td>{{item.price | currency:'CAN':true: '1.2-2'}}</td> 
          <td>{{item.starRating}}</td> 
         </tr> 

        </tbody> 
       </table> 
      </div> 
    </div> 
</div> 

Answer 1

Измените эту строку

<table class = 'table' *ngIf='products && products.length | productFilter:listFilter'> // wrong 

этому

<table class='table' *ngIf='products && products.length'> // правильно

Изменение этой линии

<tr *ngFor='let item of products'>
к этому
<tr *ngFor='let item of products | productFilter:listFilter'> // применяющим трубы здесь

Надежда, что помогает.

Answer 2

Вы должны зарегистрировать свои трубы в вашем объявлении разделе App модуля. убедитесь, что вы включили это в свой модуль приложения.

@NgModule({ 
    declarations: [ 
    ProductFilterPipe 
    ], 
    imports: [ 
    ... 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Другое дело, не уверен, что вы можете добавить фильтр в *ngIF блоке. попробуйте сначала за пределами нормальной затруднительное {{}} затем поместить его в блок ngif, если он работает