Angular Ionic Firestore：过滤/搜索

Question

我希望根据页面顶部的输入过滤我的结果集。

主页标记

  <ion-searchbar [(ngModel)]="query"></ion-searchbar>

  <ion-card *ngFor="let note of noteList | search:'distillery':query | async" routerLink="/detail/{{note.id}}">

首页 TS

  import { Observable } from 'rxjs';
  import { Router } from '@angular/router'; 
  import { Note } from '../models/note.interface';
  import { FirestoreService } from '../services/data/firestore.service';
  import { Component, Pipe, PipeTransform } from '@angular/core';

  @Pipe({
    name: 'search'
  })
  export class SearchPipe implements PipeTransform {
    public transform(value, keys: string, term: string) {  
      if (!term) return value;
      return (value || []).filter(note => keys.split(',').some(key => note.hasOwnProperty(key) && new RegExp(term, 'gi').test(note[key])));

    }
  }

  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage {

    public noteList;
    constructor(
      private firestoreService: FirestoreService,
      private router: Router
    ) {}

    ngOnInit() {
      this.noteList = this.firestoreService.getNoteList().valueChanges();
    }
  }

我在控制台中遇到的错误是......

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'search' could not be found ("
  <ion-searchbar [(ngModel)]="query"></ion-searchbar>

  <ion-card *ngFor="let [ERROR ->]note of noteList | search:'distillery':query | async" routerLink="/detail/{{note.id}}">
    <ion-card"): ng:///HomePageModule/HomePage.html@15:24

Answer 1

您需要将SearchPipe 注入尝试使用它的组件HomePage。您可以在组件的构造函数中执行此操作。

constructor(
  private firestoreService: FirestoreService,
  private router: Router,
  private search: SearchPipe
) {}