-2
我试图添加一些搜索参数,允许用户过滤他们看到的内容,但每次添加管道时,它给了我一个错误。模板解析错误:无法读取未定义的属性'toUpperCase'(“在角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
});
}
}
Ë 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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]: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/[email protected]:8 ("product.prodid]"> {{product.productname}} </a> </td>
<td> {{product.vintage}}</td>
<td>[ERROR ->] {{product.volume}}</td>
<td> {{product.lcbo}}</td>
</tr>
"): ng:///AppModule/[email protected]: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/[email protected]:8 ("
<td> {{product.vintage}}</td>
<td> {{product.volume}}</td>
<td>[ERROR ->] {{product.lcbo}}</td>
</tr>
"): ng:///AppModule/[email protected]: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
无toUpperCase' 。也许你应该看看'productFilter'。 – jonrsharpe
这就是我的想法,但它给了我这个错误。产品过滤器只是一个json对象。我会把它,但我不认为它造成的错误。 – majestyc54
@jonrsharpe'你没有发布任何东西用于上例。也许你应该看看productFilter'错误来自角度编译器。它正在尝试构建像ngFor +'''toUpperCase – yurzui