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

Question

我正在尝试让 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));
  }
}

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>

Answer 1

据我了解，您正在为 beer-list 使用单独的模块，因此您需要在 beer-list.module.ts 中包含 Ng2SearchPipeModule 和 FormsModule 而不是在 app.module 中。