如何在离子应用中实现<ion-searchbar>来过滤Firebase数据？

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

<ion-list>
  <ion-item *ngFor="let item of filteredData | filterData: searchKeyword">
    {{ item.name }}
  </ion-item>
</ion-list>

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  searchKeyword: string;
  data: Observable<any[]>;
  filteredData: any[];

  constructor(private db: AngularFireDatabase) {
    this.data = this.db.list('your-firebase-collection').valueChanges();
    this.data.subscribe((result) => {
      this.filteredData = result;
    });
  }
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterData'
})
export class FilterDataPipe implements PipeTransform {
  transform(items: any[], keyword: string): any[] {
    if (!items || !keyword) {
      return items;
    }

    return items.filter(item => item.name.toLowerCase().includes(keyword.toLowerCase()));
  }
}

import { FilterDataPipe } from './filter-data.pipe';

@NgModule({
  declarations: [FilterDataPipe],
  ...
})
export class AppModule {}