开发者社区> 问答> 正文

debouncetime使窗体控件抖动两次

已解决

我在用 debounceTime为了在下拉列表中得到一个列表,到目前为止一切正常。我输入了三个字符,它触发api调用返回给我一个列表,但是问题是当我在列表中选择一个项目时值更改来自控件的导致此调用再次调用,这是不必要的。如何防止这种情况?

这是我的代码

this.myForm.controls['control'].valueChanges.pipe(
      filter(text => text.length > 2),
      debounceTime(1000),
      distinctUntilChanged()).subscribe((value: string) => {
        this.getItem(value);
});

展开
收起
sossssss 2019-12-09 16:03:31 1592 0
1 条回答
写回答
取消 提交回答
  • 采纳回答

    我认为最好为表单控件提供一个标识,以便您寻找如下所示的文本输入:

    <input type="text" id="inputText">
    
    

    然后只使用表单控件在键入数据时获取数据,如下例所示

    ngOnInit() {
        const inputText = document.getElementById('inputText');
    
        const typeahead = fromEvent(inputText, 'input').pipe(
          map((e: KeyboardEvent) => (<HTMLInputElement>e.target).value),
          filter(text => text.length > 2),
          debounceTime(10),
          distinctUntilChanged()
       );
    
        typeahead.subscribe(data => {
          this.getItem(data);
        });
      }
    

    那么只有当您在输入表单控制器上键入时,它才会触发 https://stackblitz.com/edit/angular-s1quxk

    2019-12-09 16:07:10
    赞同 展开评论 打赏
问答分类:
API
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载