模板解析錯誤：無法讀取未定義的屬性'toUpperCase'（「在角2中嘗試使用管道時

Question

我試圖添加一些搜索參數，允許用戶過濾他們看到的內容，但每次添加管道時，它給了我一個錯誤。

這裏是我的模板，它在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 
      }); 
    } 

} 

Ë DIT： 下面是產品篩選對象

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 

Answer 1

您應該刪除您已經發布什麼用途`;

*ngFor="let product of products | filter: productFilter; | paginate: ... 
                ^^^^^