模糊搜索延迟调用接口

HTML：

<nz-select
      style="width: 200px;"
      nzAllowClear
      [nzPlaceHolder]="'ks-test'"
      [nzFilter]="false"
      [(ngModel)]="selectedOption"
      (nzSearchChange)="searchChange($event)"
      [nzNotFoundContent]="'无法找到'"
      [nzShowSearch]="true">
      <nz-option
        *ngFor="let option of searchOptions"
        [nzLabel]="option.modelName"
        [nzValue]="option.modelName">
      </nz-option>
    </nz-select>

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

private searchTerms = new Subject<string>(); // 定义这个对象
// 初始化的时候，执行
onInit() {
	this.searchTerms
      .debounceTime(300)        // wait 300ms after each keystroke before  considering the term   每次点击后等待300毫秒
      .distinctUntilChanged()   // ignore if next search term is same as previous  如果下一个搜索词与之前相同就忽略
      .subscribe(val => this.searchInput(val))
}

// select的 搜索函数改变的时候：
searchChange(data) {
    console.log("search的搜索字段改变了");
    this.searchTerms.next(data); // 延迟300ms，然后过滤相同的值
  }

public searchOptions=[];
// 调用接口函数
searchInput(val) {
    console.log("searchInput函数执行了...",val)
    this.listService.getThings({}).then(res=>{
      console.log("获取模型列表接口的返回res：",res);
      this.searchOptions=res || [];
    })
}