0

在按照教程使用 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>
4

2 回答 2

1

更改此行

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

对此

<table class='table' *ngIf='products && products.length'>// 正确的

更改此行

<tr *ngFor='let item of products'>
to this
<tr *ngFor='let item of products | productFilter:listFilter'> // 在此处应用管道

希望有帮助。

于 2017-02-08T23:05:56.473 回答
1

您需要在 App Module 声明部分中注册您的管道。确保您将其包含在您的应用程序模块中。

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

另一件事，不确定您是否可以在*ngIF块中添加过滤器。在正常绑定中先在外面尝试，{{}}然后如果可以，则将其放入 ngif 块中

于 2017-02-08T22:14:11.643 回答