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 = ["暫無匹配數據"];
                    }
                })
            })