Ошибка синтаксического анализа шаблона: невозможно прочитать свойство toUpperCase неопределенного ("в angular 2 при попытке использовать канал

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

Вот мой шаблон. Именно добавление фильтра в цикл ngFor вызывает ошибку.

<div class="col-sm-12">
  <h2>Product Catalogue</h2>
  <input [(ngModel)]="productFilter.productname" placeholder="search">

  <pagination-controls (pageChange)="page = $event" id="1"
                      maxSize="5"
                      directionLinks="true"
                      autoHide="true">
                </pagination-controls>
  <table class="col-sm-12">
    <tr>
      <th>Product Name </th>
      <th>Vintage </th>
      <th>Volume</th>
      <th>Product Number </th>
    </tr>

    <tr *ngFor="let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ">
      <td><a [routerLink] = "['/', id, product.prodid]">  {{product.productname}} </a> </td>
      <td> {{product.vintage}}</td>
      <td> {{product.volume}}</td>
      <td> {{product.lcbo}}</td>
    </tr>

  </table>
</div>

Вот моя трубка.

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

@Pipe({
  name: 'filter'
})
export class ProductpipePipe implements PipeTransform {
     transform(items: Array<any>, filter: {[key: string]: any }): Array<any> {
        return items.filter(item => {
                let notMatchingField = Object.keys(filter)
                                             .find(key => item[key] !== filter[key]);

                return !notMatchingField; // true if matches all fields
            });
  }

}

редактировать: вот объект productFilter

productFilter = {productname: "",
};

Вот все сообщение об ошибке:

 Uncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("
    </tr>

    <tr [ERROR ->]*ngFor="let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage"): ng:///AppModule/DashboardComponent.html@29:8
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 51 in [let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ] in ng:///AppModule/DashboardComponent.html@29:8 ("Filter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ">
      <td><a [ERROR ->][routerLink] = "['/', id, product.prodid]">  {{product.productname}} </a> </td>
      <td> {{product."): ng:///AppModule/DashboardComponent.html@30:13
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 51 in [let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ] in ng:///AppModule/DashboardComponent.html@29:8 ("uctFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ">
      <td>[ERROR ->]<a [routerLink] = "['/', id, product.prodid]">  {{product.productname}} </a> </td>
      <td> {{produ"): ng:///AppModule/DashboardComponent.html@30:10, Directive RouterLinkWithHref
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 51 in [let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ] in ng:///AppModule/DashboardComponent.html@29:8 ("uctFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ">
      <td>[ERROR ->]<a [routerLink] = "['/', id, product.prodid]">  {{product.productname}} </a> </td>
      <td> {{produ"): ng:///AppModule/DashboardComponent.html@30:10, Directive RouterLinkWithHref
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 51 in [let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ] in ng:///AppModule/DashboardComponent.html@29:8 ("uctFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ">
      <td>[ERROR ->]<a [routerLink] = "['/', id, product.prodid]">  {{product.productname}} </a> </td>
      <td> {{produ"): ng:///AppModule/DashboardComponent.html@30:10, Directive RouterLinkWithHref
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 51 in [let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ] in ng:///AppModule/DashboardComponent.html@29:8 ("rrentPage:page, id: '1'}; let i = index  ">
      <td><a [routerLink] = "['/', id, product.prodid]">[ERROR ->]  {{product.productname}} </a> </td>
      <td> {{product.vintage}}</td>
      <td> {{product.volume}"): ng:///AppModule/DashboardComponent.html@30:56
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 51 in [let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ] in ng:///AppModule/DashboardComponent.html@29:8 ("   <td><a [routerLink] = "['/', id, product.prodid]">  {{product.productname}} </a> </td>
      <td>[ERROR ->] {{product.vintage}}</td>
      <td> {{product.volume}}</td>
      <td> {{product.lcbo}}</td>
"): ng:///AppModule/DashboardComponent.html@31:10
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 51 in [let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ] in ng:///AppModule/DashboardComponent.html@29:8 ("product.prodid]">  {{product.productname}} </a> </td>
      <td> {{product.vintage}}</td>
      <td>[ERROR ->] {{product.volume}}</td>
      <td> {{product.lcbo}}</td>
    </tr>
"): ng:///AppModule/DashboardComponent.html@32:10
Parser Error: Unexpected token |, expected identifier, keyword, or string at column 51 in [let product of products | filter: productFilter;  |  paginate: {itemsPerPage: 20, currentPage:page, id: '1'}; let i = index  ] in ng:///AppModule/DashboardComponent.html@29:8 ("
      <td> {{product.vintage}}</td>
      <td> {{product.volume}}</td>
      <td>[ERROR ->] {{product.lcbo}}</td>
    </tr>

"): ng:///AppModule/DashboardComponent.html@33:10
    at syntaxError (http://localhost:4200/vendor.bundle.js:22761:34)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:33882:19)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:48034:39)
    at http://localhost:4200/vendor.bundle.js:47954:62
    at Set.forEach (native)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:47954:19)
    at http://localhost:4200/vendor.bundle.js:47841:19
    at Object.then (http://localhost:4200/vendor.bundle.js:22750:148)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:47840:26)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:47769:37)
syntaxError @ compiler.es5.js:1690
webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse @ compiler.es5.js:12811
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate @ compiler.es5.js:26963
(anonymous) @ compiler.es5.js:26883
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents @ compiler.es5.js:26883
(anonymous) @ compiler.es5.js:26770
then @ compiler.es5.js:1679
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26769
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26698
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4535
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4521
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 31d40e39a28f00c92d63:54
2 @ main.ts:11
__webpack_require__ @ bootstrap 31d40e39a28f00c92d63:54
webpackJsonpCallback @ bootstrap 31d40e39a28f00c92d63:25
(anonymous) @ main.bundle.js:1