一直以为 pipe(debounceTime(1000), distinctUntilChanged()) 不起作用
原因:使用方法错误
<input type="text" [(ngModel)]='globalSearchWord' placeholder="请输入搜索关键词" (keyup)='globalSearch()'>
globalSearch(v) { this.showErrBox = false; this.indexService.globalSearch(this.globalSearchWord).pipe(debounceTime(1000), distinctUntilChanged()).subscribe(data => { if (data.code == '0001') { this.options = data.data; } else { let that = this; // setTimeout(function () { // that.showErrBox = false; // }, 2000) this.options = []; } }) }
经查询资料后发现正确的使用方法 :以下二种:
方法一:
<input type="text" [formControl]="word">
this.word = new FormControl(''); this.word.valueChanges .pipe( debounceTime(500), distinctUntilChanged() ).subscribe(val => { this.showErrBox = false; this.indexService.globalSearch(val).subscribe(data => { if (data.code == '0001') { this.options = data.data; } else { let that = this; this.options = ["暂无匹配数据"]; } }) })
方法二:
<input #questionInput placeholder="请输入搜索关键词" nz-input [(ngModel)]="globalSearchWord">
this.input$ = fromEvent(this.questionInput.nativeElement, 'input') .pipe( debounceTime(500), distinctUntilChanged() ).subscribe(val => { this.showErrBox = false; this.indexService.globalSearch(this.globalSearchWord).subscribe(data => { if (data.code == '0001') { this.options = data.data; } else { let that = this; this.options = ["暂无匹配数据"]; } }) })