我正在尝试从数字数组中进行过滤一个数字。但是我遇到了这个错误。这是我的代码。
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)"
我希望您对此有价值的解决方案。祝你有美好的一天。
在下行中的问题:在您的过滤器中,"数字过滤器"搜索文本不使用,但您正在HTML中使用。多数民众赞成在html中尝试"键"而不是"搜索文本"
<li *ngFor = "let numbers of number | number-filter : searchtext ">{{numbers}}</li>
to
<li *ngFor = "let number of numbers | number-filter : key">{{numbers}}</li>
我找到了这种方式的工作
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;
}
}
更新在这里结束