码迷,mamicode.com
首页 > 其他好文 > 详细

angular6 input节流

时间:2019-01-07 20:46:13      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:bsp   put   event   set   arc   als   资料   color   box   

一直以为   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节流

标签:bsp   put   event   set   arc   als   资料   color   box   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!