时间戳

首页 > 解决方案 > 在角度模板中使用 Array.filter() 时获取“无法读取未定义的属性 'toUpperCase'”

angular - 在角度模板中使用 Array.filter() 时获取“无法读取未定义的属性 'toUpperCase'”

问题描述

Array.filter在我的角度模板中使用时出现上述错误。但是，如果我创建一个pipe来过滤数组，它就可以正常工作。

引发错误的代码： Cannot read property 'toUpperCase' of undefined

<div *ngFor="let i of ([0,1,2,3,5].filter((val)=>val>2))"></div>

堆栈闪电链接

工作正常的代码：

<div *ngFor="let i of ([0,1,2,3,5]|filterArray)">{{i}}</div>

过滤器阵列管道：

@Pipe({
  name: 'filterArray'
})
export class FilterArrayPipe implements PipeTransform {

  transform(arr: [any], args?: any): any {
    return arr.filter((val)=>val>=3);
  }

}

完全错误：

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


<div [ERROR ->]*ngFor="let i of ([0,1,2,3,5].filter((val)=>val>2))"></div>
<!--<div *ngFor="let i of ([0,1,2,3,5]|f"): ng:///AppModule/AppComponent.html@3:5
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
    at compiler.js:22639
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
    at compiler.js:22549
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)
syntaxError @ compiler.js:215
push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @ compiler.js:14702
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:22709
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:22696
(anonymous) @ compiler.js:22639
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @ compiler.js:22639
(anonymous) @ compiler.js:22549
then @ compiler.js:206
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:22548
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:22508
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4182
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1

标签： angular

解决方案

这是 Angular 抛出的一个通用错误，每当模板出现问题时，它来自 Angular 本身。

在这种情况下，您试图在模板本身中使用过滤器的箭头功能，这是错误的。

此外，一开始就这样做并不是一个明智的主意。每次更改检测运行时，都会重新执行此过滤器调用，这将产生巨大的性能问题。所以我会要求你过滤component.ts中的项目并绑定它。

推荐阅读