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 = ["暂无匹配数据"];
                        }
                    })
                })
  • 相关阅读:
    学习进度条第一周
    构建之法阅读笔记01
    软件工程个人作业01
    《构建之法》阅读笔记
    Day6:闭包函数、无参装饰器
    Day5:函数参数
    Day4:字符编码与文件处理
    Day3:数据类型(布尔值、集合)
    Day2:数据类型(列表、元组、字典)
    Day1:初识Python
  • 原文地址:https://www.cnblogs.com/fuzitu/p/10234791.html
Copyright © 2011-2022 走看看