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：找不到管道“过滤器”

1 个答案: