Template Parse error: Cannot read property 'toUpperCase' of undefined (" in angular 2 when trying to use pipe
Template Parse error: Cannot read property 'toUpperCase' of undefined (" in angular 2 when trying to use pipe
我正在尝试添加一些搜索参数，以允许用户过滤他们看到的内容，但每次我添加管道时，它都会给我一个错误。
这是我的模板。是在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
您应该删除 ;
*ngFor="let product of products | filter: productFilter; | paginate: ...
^^^^^
正如上面的回答，您应该删除 ;
如果你想使用带索引的过滤器，你可以使用：
*ngFor="let product of products | filter: productFilter; let i= index
index应该在filter之后，;应该在filter
中使用
我正在尝试添加一些搜索参数，以允许用户过滤他们看到的内容，但每次我添加管道时，它都会给我一个错误。
这是我的模板。是在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
您应该删除 ;
*ngFor="let product of products | filter: productFilter; | paginate: ...
^^^^^
正如上面的回答，您应该删除 ;
如果你想使用带索引的过滤器，你可以使用：
*ngFor="let product of products | filter: productFilter; let i= index
index应该在filter之后，;应该在filter