Question

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

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

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

STACKBLITZ LINK

正常工作的代码：

<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

Answer 1

这是Angular抛出的一个一般性错误，只要模板有问题，它就会来自Angular本身。

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

此外，首先这样做不是一个明智的主意。每次运行更改检测时，都会重新执行此筛选器调用，这将带来巨大的性能问题。因此，我将要求您过滤component.ts中的项目并将其绑定。

Answer 2

您可以使用：

<div *ngFor="let item of ([0, 1, 2, 3, 4, 5, 6])">
  <p *ngIf="item> 2">
      {{item}}
  </p>
</div>

demo

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

2 个答案: