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 || [];
})
}