创建自定义搜索管道以动态过滤结果后，我仍然失败：解析错误：找不到管道“过滤器”

Question

我正在 angular4 和 node.js 中部署一个项目。我创建了一个名为 filter.pipe.js 的自定义管道过滤器文件。以及所有相关的代码。我仍然收到错误-->

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

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

 import { FilterPipe} from './transaction/filter.pipe';
 import { Pipe, PipeTransform } from '@angular/core';


 @NgModule({
 imports: [ ..],

   declarations: [ FilterPipe,..]
  )}

app.component.ts

 import { Pipe, PipeTransform } from '@angular/core';
 import { FilterPipe} from '../transaction/filter.pipe';

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

请帮忙。

Answer 1

这是我的示例应用程序，您可以在 stackblitz 上对其进行测试 stackblitz

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

        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

        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

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