zoukankan      html  css  js  c++  java
  • 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 = ["暂无匹配数据"];
                        }
                    })
                })
  • 相关阅读:
    树莓派笔记——了解与购买树莓派(1)
    SQLserver 备份和还原 失败
    lua coroutine
    lua for循环
    leetcode 46. 全排列
    sprintf、vsprintf、sprintf_s、vsprintf_s、_snprintf、_vsnprintf、snprintf、vsnprintf 函数辨析
    rapidxml的常见读写操作
    C++11 可变参数模板构造string列表
    Fedora 28 设置yum代理
    Linux命令计算文件中某一列的平均值
  • 原文地址:https://www.cnblogs.com/fuzitu/p/10234791.html
Copyright © 2011-2022 走看看