Angular2 .filter不是函數

Question

按照教程使用angular2管道過濾數據時，出現以下錯誤

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

是否有人能夠闡明為什么value.filter不是函數。 它似乎與教程的語法保持一致，我想也許是更新后的內容需要有所不同嗎？

管

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

您需要在“應用模塊聲明”部分中注冊管道。 確保將其包含在您的應用模塊中。

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

另一件事，不確定是否可以在*ngIF塊中添加過濾器。 首先在正常綁定{{}}嘗試，然后將其放入ngif塊（如果可行）

Answer 2

更改此行

 <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'> <tr *ngFor='let item of products | productFilter:listFilter'> //在此處應用管道

希望能有所幫助。