angular6 input节流

一直以为 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 = ["暂无匹配数据"];
                    }
                })
            })

猜你喜欢