Cannot read property 'toUpperCase' of undefined (“<input name= ”searchtext“ [(ngModel)]=”searchtext\">

问题:

I am trying to do filter a number from a number array. but I got this errors.this a my codes.

app.module.ts

    import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NumberFilterPipe } from './number-filter.pipe'; import { FormsModule } from '@angular/forms'; import { StringFilterPipe } from './string-filter.pipe'; import { NumberFilterService } from './service/number-filter.service';   @NgModule({   declarations: [     AppComponent,     NumberFilterPipe,     StringFilterPipe ],   imports: [     BrowserModule,     FormsModule   ],   providers: [     NumberFilterService],   bootstrap: [AppComponent] }) export class AppModule { } 

this the my html

<input  name= "searchtext"  [(ngModel)]="searchtext"> {{searchtext}} <li *ngFor = "let numbers of number | number-filter : searchtext ">{{numbers}}</li> <br><br> 

this the pipe

import { Pipe, PipeTransform } from '@angular/core'; import { NumberFilterService } from './service/number-filter.service';  @Pipe({   name: 'number-filter' }) export class NumberFilterPipe implements PipeTransform {  flterNumber: NumberFilterService;    transform(numbers: any, key: any): any[] {        return this.flterNumber.filterNumber(numbers, key);     }  } 

and this the service.ts

import { Injectable } from '@angular/core';  @Injectable() export class NumberFilterService {      arrayLen = 0;     itteration = 0;     result = [];     constructor() { }     filterNumber(values: any[], key: any): any[] {         this.arrayLen =  values.length;         for (this.itteration = 0 ; this.itteration < this.arrayLen ; this.itteration ++  ) {             if (key === values[this.itteration]) {                 this.result.push(values[this.itteration]);             }          }         return this.result;     }  } 

and I got this errors.

"Uncaught Error: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined ("<input  name= "searchtext"  [(ngModel)]="searchtext"> {{searchtext}} <li [ERROR ->]*ngFor = "let numbers of number | number-filter : searchtext ">{{numbers}}</li> <br><br>"): ng:///AppModule/AppComponent.html@2:4 Parser Error: Unexpected token -, expected identifier, keyword, or string at column 31 in [let numbers of number | number-filter : searchtext ] in ng:///AppModule/AppComponent.html@2:4 ("l)]="searchtext"> {{searchtext}} <li *ngFor = "let numbers of number | number-filter : searchtext ">[ERROR ->]{{numbers}}</li> <br><br>"): ng:///AppModule/AppComponent.html@2:67     at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:684)     at TemplateParser.parse (webpack-internal:///../../../compiler/esm5/compiler.js:24547)     at JitCompiler._parseTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33975)     at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33950)     at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33852)     at Set.forEach (<anonymous>)     at JitCompiler._compileComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33852)     at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33722)     at Object.then (webpack-internal:///../../../compiler/esm5/compiler.js:673)     at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33721)" 

I hope your valuable solution for this.thanks all . Have a nice day.

回答1:

I found this way its working

Pipe.ts

import { Pipe, PipeTransform } from "@angular/core";  @Pipe({   name: 'myfilter' })  export class MyFilter implements PipeTransform {   transform(items: any[], term: any[]): any {     if (!term)       return items;     return items.filter(item => item == term);   } } 

component template

<input type="text"  [(ngModel)]="term" placeholder="filter by prefix" /> <li *ngFor="let product of listA  | myfilter:term" >{{product}}</li> 

component ts

  val:number ;   listA = [1,20,11,99]; 

---

Final update which is working

Below is fully tested and working

html template file

<input name="searchtext" [(ngModel)]="searchtext" (ngModelChange)="fitlerNumbers()" > {{numbers|json}} <ul>   <li *ngFor="let number of numbers|numberfilter:2">{{number}}</li> </ul> 

pipe.ts file

import { Pipe, PipeTransform } from '@angular/core'; import { NumberFilterService } from './NumberFilterService';  @Pipe({   name: 'numberfilter' }) export class NumberFilterPipe implements PipeTransform {    constructor(public servicenum : NumberFilterService){}    transform(numbers: any[], key: any ): any[] {     return this.servicenum.filterNumber(numbers,key);    } } 

Filter SErvice file

import { Injectable } from '@angular/core';  @Injectable() export class NumberFilterService {      arrayLen = 0;     itteration = 0;     result = [];    public filterNumber(values: any[], key: any): any[] {         this.arrayLen =  values.length;         for (this.itteration = 0 ; this.itteration < this.arrayLen ; this.itteration ++  ) {             if (key === values[this.itteration]) {                 this.result.push(values[this.itteration]);             }          }         return this.result;     } } 

Updates end here

回答2:

problem in below line: in your filter "number-filter" searchtext is not used but you are using in html. thats the problem try "key" instead of "searchtext" in html

<li *ngFor = "let numbers of number | number-filter : searchtext ">{{numbers}}</li> to <li *ngFor = "let number of numbers | number-filter : key">{{numbers}}</li> 

文章来源: Cannot read property 'toUpperCase' of undefined (“