Question

我正在使用FromEvent KeyUp和debounceTime在我的应用程序中实现非常简单的搜索功能，如下代码：

{{1}}

只要在输入框中输入内容，它就可以工作，但是如您所见，我添加了一个过滤器，它假定仅在输入值> 3时才触发api调用。

但是，过滤器不起作用。我现在坚持这个问题。任何想法？谢谢

Answer 1

请勿使用fromEvent，keyup，而可以使用Angular推荐的便捷方法。您可以按以下方式使用Angular Forms和valueChanges来实现所需的功能。

HTML

<div [formGroup]="myGroup">
  <input formControlName="search" type="text" placeholder="search">
</div>

按以下在组件中定义FormGroup。

myGroup: FormGroup;

this.myGroup = new FormGroup({
   search: new FormControl()
});

然后，您可以subscribe来评估搜索FormControl的变化，如下所示。

this.myGroup.get('search').valueChanges.debounceTime(500)
  .subscribe((val: any) => {

    const search = val.trim();
    if (search.length > 3) {
      console.log('Search Term => ', search);
      // TODO: Handle your API Call Here.
    }
});

找到有效的 StackBlitz Here.

FromEvent Keyup筛选器无法正常工作

1 个答案: