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 = ["暂无匹配数据"];
                        }
                    })
                })
  • 相关阅读:
    开发servlet三种方式
    puppet 启动失败
    linux 内核 中链表list
    software level
    ubuntu 使用 root “sudo /bin/bash”
    linux 内存管理
    linux kernel "current" macro
    hello.hs haskell
    ubuntu samba
    微信小程序中使用 npm包管理 (保姆式教程)
  • 原文地址:https://www.cnblogs.com/fuzitu/p/10234791.html
Copyright © 2011-2022 走看看