Angular 添加输入过滤器以显示产品，角度

我正试图让Ng2SearchPipeModule正常工作，尽管我已经按照说明在app.module.ts以及FormsModule中声明了它。我仍然收到这个错误消息

“无法绑定到'ngModel'，因为它不是'input'的已知属性”

我也明白了

找不到管道“筛选器”

app.module.ts：

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

// search module
import { Ng2SearchPipeModule } from "ng2-search-filter";

import { AppComponent } from "./app.component";
import { RouterModule } from "@angular/router";
import { AppRoutes } from "./app.routing";
import { BeersModule } from "./beers/beers.module";
import { StoreModule } from "@ngrx/store";
import { EffectsModule } from "@ngrx/effects";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, Ng2SearchPipeModule, RouterModule.forRoot(AppRoutes), StoreModule.forRoot({}), EffectsModule.forRoot([]), BeersModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

beer-list.component.ts

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { select, Store } from "@ngrx/store";
import { DrinksState } from "../store";
import { Observable } from "rxjs/index";
import { getBeersSelector } from "../store/beers.selectors";
import { fetchBeersListRequest } from "../store/beers.actions";

@Component({
  selector: "app-beer-list",
  templateUrl: "./beer-list.component.html",
  styleUrls: ["./beer-list.component.scss"]
})
export class BeerListComponent implements OnInit {
  public beers$: Observable<any>;
  public searchText: string;

  constructor(private store: Store<DrinksState>, private router: Router) {}

  ngOnInit() {
    this.store.dispatch(fetchBeersListRequest());
    this.beers$ = this.store.pipe(select(getBeersSelector));
  }
}

从“@angular/core”导入{Component，OnInit}；
从“@angular/Router”导入{Router}”；
从“@ngrx/Store”导入{select，Store}”；
从“./store”导入{drinkstate}；
从“rxjs/index”导入{Observable}；
从“./store/beers.selectors”导入{getBeersSelector}；
从“./store/beers.actions”导入{fetchBeersListRequest}；
@组成部分({
选择器：“应用程序啤酒列表”，
templateUrl:“./beer list.component.html”，
样式URL:[“/beer list.component.scss”]
})
导出类BeerListComponent实现OnInit{
公共啤酒美元：可见；
公共搜索文本：字符串；
构造函数（私有存储：存储，私有路由器：路由器）{}
恩戈尼尼特（）{
this.store.dispatch（fetchBeersListRequest（））；
this.beers$=this.store.pipe（选择（getBeersSelector））；
}
}

beer-list.component.html：

<div class="search">
  <input type="text" placeholder="search by name of the beer" [(ngModel)]="searchText" />
</div>

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

{{beer.name}

{{beer.tagline}

据我所知，您正在为

啤酒列表使用单独的模块，因此您需要将
Ng2SearchPipeModule
和
FormsModule
都包含在
啤酒列表.module.ts
中，而不是
应用程序.module
据我所知，您正在为
啤酒列表
使用单独的模块，因此，您需要将
Ng2SearchPipeModule
和
FormsModule
都包含在
beer list.module.ts
中，而不是
app.module
中