1. 首先在模板中新建一个文本框，并将它绑定到组件中的关键字属性：

2. 在组件中，引入rxjs的Observable和Subject：

import { Observable, Subject } from 'rxjs';

并在组件类中定义一个Subject：

private searchTerms = new Subject();

3. 在ngOnInit方法中，使用debounceTime和distinctUntilChanged对搜索关键字进行过滤，并将过滤后的结果传给searchTerms Subject：

ngOnInit() {
  this.filteredItems = this.searchTerms.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap((keyword: string) => this.itemService.searchItems(keyword))
  );
}

4. 定义一个search方法，用于在文本框中输入关键字时被调用，更新searchTerms Subject：

search(term: string): void {
  this.searchTerms.next(term);
}

5. 在模板中，使用async管道和ngFor指令，将过滤后的结果渲染到页面上：

  
{{item.name}}

完整代码示例：

import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { ItemService } from './item.service';
import { Item } from './item.model';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit {
  keywords: string;
  filteredItems: Observable;
  private searchTerms = new Subject();

  constructor(private itemService: ItemService) { }

  ngOnInit() {
    this.filteredItems = this.searchTerms.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((keyword: string) => this.itemService.searchItems(keyword))
    );
  }

  search(term: string): void {
    this.searchTerms.next(term);
  }
}

  
{{item.name}}