Angular/Chrome: 找不到管道 'filter'

Question

虽然这个话题出现过几次，但我发现解决方案并不令我满意。所以我有以下内容：

play.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';

import { PlayComponent } from './play.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, Ng2SearchPipeModule ],
  declarations: [ PlayComponent ],
  bootstrap:    [ PlayComponent ],
  providers:    [ Ng2SearchPipeModule ]
})
export class PlayModule { }

play.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'play',
  templateUrl: './play.component.html',
  styleUrls: [ './play.component.scss' ]
})
export class PlayComponent  {
  name = 'Angular';
  items = ["Kyle","Eric","Bailey", "Deborah", "Glenn", "Jaco", "Joni", "Gigi"]
  term: string;
}

play.component.html:

<div>
        <input type="text" [(ngModel)]="term" >
        <div *ngFor = "let item of items | filter:term" >
          <p>
            {{item}}
          </p>
        </div>
     </div>

现在在 Chrome 中，错误消息显示为：

The pipe 'filter' could not be found ("
    <div>
        <input type="text" [(ngModel)]="term" >
        <div *ngFor = "le[ERROR ->]t item of items | filter:term" >
          <p>
            {{item}}
"): ng:///ReportsModule/playComponent.html@5:25
Error: Template parse errors:
The pipe 'filter' could not be found ("
    <div>
        <input type="text" [(ngModel)]="term" >
        <div *ngFor = "le[ERROR ->]t item of items | filter:term" >
          <p>
            {{item}}
"): ng:///ReportsModule/PlayComponent.html@5:25

谁能看到我遗漏了什么？

Answer 1

您不必将 Ng2SearchPipeModule 添加到 Providers 数组。

您的 play.module.ts 应该是：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { Ng2SearchPipeModule } from 'ng2-search-filter';

import { PlayComponent } from './play.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, Ng2SearchPipeModule ],
  declarations: [ PlayComponent ],
  bootstrap:    [ PlayComponent ]
})
export class PlayModule { }

这是一个有效的 sample

Angular/Chrome: 找不到管道 'filter'

Angular/Chrome: The pipe 'filter' could not be found

google-chrome

pipe

filter

typescript

angular