Angular Autocomplete -如何延迟API请求数据，直到用户关注该字段？

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, switchMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-autocomplete',
  template: `
    <input type="text" [formControl]="searchControl" />
    <ul>
      <li *ngFor="let result of searchResults">{{ result }}</li>
    </ul>
  `,
})
export class AutocompleteComponent {
  searchControl = new FormControl();
  searchResults: string[] = [];

  constructor(private http: HttpClient) {
    this.searchControl.valueChanges
      .pipe(
        debounceTime(300), // 延迟300毫秒
        switchMap((value) => this.searchAPI(value))
      )
      .subscribe((results) => {
        this.searchResults = results;
      });
  }

  searchAPI(value: string) {
    // 调用后端API请求匹配的结果
    return this.http.get<string[]>(`/api/search?keyword=${value}`);
  }
}