Angular中使用Ng2SearchPipeModule实现产品搜索遇错误求助

嘿，我来帮你搞定这两个头疼的错误，它们其实都是模块作用域和管道顺序的问题，咱们一步步来：

错误原因分析 #

1. Can't bind to 'ngModel' since it isn't a known property of 'input' #

你的BeerListComponent属于BeersModule这个特性模块，但你只在根模块AppModule里导入了FormsModule。Angular的模块是有独立作用域的，子模块不会自动继承根模块的导入内容，所以BeersModule里并没有FormsModule，自然识别不了ngModel指令。

2. The pipe 'filter' could not be found #

同样的道理，Ng2SearchPipeModule只在AppModule中导入了，BeersModule没有导入这个模块，所以组件无法找到filter管道。另外还有个小细节：你的async管道位置放错了，应该先把Observable转换成数组，再用filter过滤。

解决方案 #

第一步：给特性模块导入必要的模块 #

你需要在BeersModule中导入FormsModule和Ng2SearchPipeModule，有两种方式：

方式一：直接在BeersModule中导入

修改你的beers.module.ts文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入需要的模块
import { FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
// 导入组件
import { BeerListComponent } from './beer-list/beer-list.component';

@NgModule({
  declarations: [BeerListComponent],
  imports: [
    CommonModule,
    FormsModule, // 添加这行
    Ng2SearchPipeModule // 添加这行
  ]
})
export class BeersModule { }

方式二：创建共享模块（推荐，适合多模块复用）

如果你的项目有多个模块需要用到这些模块，可以创建一个共享模块来统一管理：

// shared/shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    Ng2SearchPipeModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    Ng2SearchPipeModule
  ]
})
export class SharedModule { }

然后在BeersModule中导入这个共享模块：

import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { BeerListComponent } from './beer-list/beer-list.component';

@NgModule({
  declarations: [BeerListComponent],
  imports: [
    SharedModule // 替换成共享模块
  ]
})
export class BeersModule { }

第二步：修正模板中的管道顺序 #

在beer-list.component.html中，把async管道放到filter管道前面，因为filter需要过滤的是数组，而不是Observable：

<div class="beer" *ngFor="let beer of (beers$ | async) | filter: searchText">
  <h4>{{ beer.name }}</h4>
  <p>{{ beer.tagline }}</p>
  <img src="{{ beer.image_url }}" routerLink="/beer-details/{{ beer.id }}" />
</div>

这样修改之后，两个错误应该都能解决了，你可以试试运行项目看看效果~

内容的提问来源于stack exchange，提问作者artworkjpm