首页 > 其他 > 详细

angular6 input节流

时间:2019-01-07 20:30:49      阅读:362      评论:0      收藏:0      [点我收藏+]

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

 

angular6 input节流

原文:https://www.cnblogs.com/fuzitu/p/10234791.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!