创建自定义搜索管道以动态过滤结果后,我仍然失败:解析错误:找不到管道“过滤器" [英] After creating custom Search Pipe to Dynamically Filter results , i am still getting Failed: parse errors: The pipe 'filter' could not be found
本文介绍了创建自定义搜索管道以动态过滤结果后,我仍然失败:解析错误:找不到管道“过滤器"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在angular4和node.js中部署一个项目.我创建了一个名为filter.pipe.js的自定义管道过滤器文件.以及所有相关代码.我仍然收到错误->
I am deploying a project in angular4 and node.js. I created a custom pipe filter file named filter.pipe.js. And all the related code. Still i am getting the error -->
Failed: Template parse errors:
The pipe 'filter' could not be found ("
</thead>
<tbody>
<tr *ngFor="let[ERROR ->] dat of result | filter:filterdata|
paginate: { itemsPerPage: 5, currentPage: p };let i = index ">
"): ng:///DynamicTestModule/TransactionComponent.html@220:23
代码
filter.pipe.ts
filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], filterdata: string): any[] {
if(!items) return [];
if(!filterdata) return items;
filterdata = filterdata.toLowerCase();
return items.filter( it => {
return it.toLowerCase().includes(filterdata);
});
}
}
app.module.ts
app.module.ts
import { FilterPipe} from './transaction/filter.pipe';
import { Pipe, PipeTransform } from '@angular/core';
@NgModule({
imports: [ ..],
declarations: [ FilterPipe,..]
)}
app.component.ts
app.component.ts
import { Pipe, PipeTransform } from '@angular/core';
import { FilterPipe} from '../transaction/filter.pipe';
app.component.html
app.component.html
<td style="width:50%">
<input class="form-control" id="input1-group1 "
style="margin-top:20px" type="text" name="search" placeholder="Enter
Search Text"
[(ngModel)]="filterdata">
</td>
<tr *ngFor="let dat of result | filter:filterdata| paginate: {
itemsPerPage: 5, currentPage: p };let i = index ">
//some more html
请帮助.
推荐答案
这是我的示例应用程序,您可以在stackblitz上对其进行测试 stackblitz
here is my sample app you can test it on stackblitz stackblitz
app.module.ts
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { FilterPipe} from './filter.pipe';
import { Pipe, PipeTransform } from '@angular/core';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, FilterPipe ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
app.component.ts
import { Component } from '@angular/core';
import { Pipe, PipeTransform } from '@angular/core';
import { FilterPipe} from './filter.pipe';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 5';
public filterdata = null;
public result = [
{ id: 1, name: 'Vikram'},
{ id: 2, name: 'Vivek'},
{ id: 3, name: 'Vijay'}
]
}
filter.pipe.ts
filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], filterdata: string): any[] {
if(!items) return [];
if(!filterdata) return items;
console.log(filterdata);
filterdata = filterdata.toString().toLowerCase();
return items.filter( it => {
console.log(it);
return it.name.toLowerCase().includes(filterdata);
});
}
}
app.component.html
app.component.html
<input class="form-control" id="input1-group1 "
style="margin-top:20px" type="text" name="search" placeholder="Enter
Search Text"
[(ngModel)]="filterdata">
<table border="1">
<thead>
<th>Id</th> <th>Name</th>
</thead>
<tbody>
<tr *ngFor="let data of result | filter:filterdata ">
<td>{{data.id}}</td> <td>{{data.name}}</td>
</tr>
</tbody>
</table>
这篇关于创建自定义搜索管道以动态过滤结果后,我仍然失败:解析错误:找不到管道“过滤器"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文