Question

即使我已按照说明在app.module.ts和 FormsModule 中声明了该代码，我仍在尝试使 Ng2SearchPipeModule 正常工作。我仍然收到此错误消息

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

我也收到消息

找不到管道“过滤器”

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使用单独的模块，因此您需要将Ng2SearchPipeModule中的FormsModule和beer-list.module.ts都包括在app.module中

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

1 个答案: