无法读取未定义的属性 'toUpperCase' ("<input name= "searchtext" [(ngModel)]="searchtext">

Question

我正在尝试从数字数组中过滤一个数字。但是我得到了这个 errors.this 我的代码。

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 { }

这是我的 html

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

这是管道

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);


  }

}

这是 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;
    }

}

我遇到了这个错误。

"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)"

希望您能为 this.thanks 所有人提供有价值的解决方案。祝你有个愉快的一天。

Answer 1

下一行的问题：在您的过滤器 "number-filter" 中未使用搜索文本，但您在 html 中使用。这就是问题所在，请尝试 "key" 而不是 html

中的 "searchtext"

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

Answer 2

我发现这种方式很有效

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);
  }
}

组件模板

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

组件 ts

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

正在运行的最终更新

下面已经过全面测试并且可以正常工作

html模板文件

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

pipe.ts 文件

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);

  }
}

过滤服务文件

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;
    }
}

更新到此结束

无法读取未定义的属性 'toUpperCase' ("<input name= "searchtext" [(ngModel)]="searchtext">

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

pipes-filters

angular-services

angular-pipe

angular

无法读取未定义的 属性 'toUpperCase' ("<input name= "searchtext" [(ngModel)]="searchtext">

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

pipes-filters

angular-services

angular-pipe

angular

无法读取未定义的属性 'toUpperCase' ("<input name= "searchtext" [(ngModel)]="searchtext">