如何在angular中过滤列表

<!-- 在组件中定义一个过滤方法 -->
<div *ngFor="let item of items | filter:searchText">
  {{ item.name }}
</div>

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter(item => {
      return item.name.toLowerCase().includes(searchText);
    });
  }
}

import { NgModule } from '@angular/core';
import { FilterPipe } from './filter.pipe';

@NgModule({
  declarations: [FilterPipe],
  exports: [FilterPipe]
})
export class PipesModule {}

<div *ngFor="let item of items | filter:searchText">
  {{ item.name }}
</div>

// filter.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FilterService {
  filterItems(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter(item => {
      return item.name.toLowerCase().includes(searchText);
    });
  }
}

import { Component } from '@angular/core';
import { FilterService } from './filter.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let item of filteredItems">
      {{ item.name }}
    </div>
  `
})
export class AppComponent {
  items = [
    { name: 'Apple' },
    { name: 'Banana' },
    { name: 'Cherry' }
  ];
  searchText = '';

  constructor(private filterService: FilterService) {}

  get filteredItems() {
    return this.filterService.filterItems(this.items, this.searchText);
  }
}

import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

// 在组件中
fromEvent(this.searchInput.nativeElement, 'input').pipe(
  debounceTime(300),
  map(event => (event.target as HTMLInputElement).value)
).subscribe(searchText => {
  this.filteredItems = this.filterService.filterItems(this.items, searchText);
});