如何将ionic 4搜索栏与*ngFor一起使用

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic 4搜索栏与*ngFor一起使用
    </ion-title>
  </ion-toolbar>
</ion-header>

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  items: any[] = [
    { name: 'Apple' },
    { name: 'Banana' },
    { name: 'Orange' },
    { name: 'Mango' },
  ];

  searchKeyword: string = '';

  constructor() {}

}

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

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

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { FilterPipe } from './filter.pipe';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
  ],
  declarations: [HomePage, FilterPipe],
  exports: [HomePage]
})
export class HomePageModule {}