rxjs实现输入延时搜索, ng-zorro

这里使用angular ng-zorro组件库的select组件。
使用普通的input使件也可以。思路也是一样的。
下面就直接贴项目片段代码进行简要说明

HTML

基于ng-zorro的组件库中的select组件。zorro: https://ng.ant.design

<nz-select [nzMaxTagCount]="3" style="width: 100%" nzPlaceHolder="请选择" [(ngModel)]="projectId" name="projectId" nzAllowClear="true"
      nzShowSearch
      [nzServerSearch]="true"
      (nzOnSearch)="onSelectInputSearch($event)">
        <nz-option *ngFor="let option of projectOfOption" [nzLabel]="option.label" [nzValue]="option.value">nz-option>
      nz-select>

TypeScript

• 定义一个行为subject
• 将行为subject转换成observable流并进行订阅
• 在订阅的代码体中加入管道进行改要的业务需求改造，如输入延时200ms后再进行下一步操作
• 在订阅的代码体中加入了switchMap，完成前一个内部 observable。可在此加入业务代码

// 加载提示
isLoading = false;
// 定义一个行为subject
projectSearchChange$ = new BehaviorSubject('');

// 订阅这一个行为subject
ngOnInit()
	const optionList$: Observable<string[]> = this.projectSearchChange$
      .asObservable()
      .pipe(debounceTime(200)) // debounceTime(200) 间隔时间 200ms
      .pipe(switchMap((value) => this.getProjectOfOptionData(value)));  // 完成前一个内部 observable
    
    // 订阅
    optionList$.subscribe(data => {
      this.projectOfOption = data;
      this.isLoading = false;
    });
}

/**
   * 输入即时搜索 - 下拉组件
   * @param value 搜索值
   */
  onSelectInputSearch(value: string) {
    this.isLoading = true;
    this.projectSearchChange$.next(value);
  }
  
 /**
   * http请求，返回observable
   * @param value 搜索值
   */
  getProjectOfOptionData(value: string): Observable<any[]>{
    // http请求，返回一个observable
    // 格式就是 projectOfOption 的数据格式，例如: [{label: '选择1', value: 1}, {label: '选择2', value: 2}]
    const url = '';
    return this.http.get(url); // 请根据自己的业务需求进行改造
  }