时间戳

首页 > 解决方案 > FromEvent Keyup 过滤器未按预期工作

javascript - FromEvent Keyup 过滤器未按预期工作

问题描述

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

<input matInput #inputSearch>

@ViewChild('inputSearch', { static: false }) input: ElementRef;

fromEvent(this.input.nativeElement, 'keyup')
      .pipe(
        filter((val: any) => val.target.value.length > 3),
        debounceTime(500),
        distinctUntilChanged(),
        switchMap((val: any) => this.userService.get(val.target.value))
      )
      .subscribe(data => {
        console.log(data);
      });

只要我在输入框中输入内容，它就会工作，但正如你所看到的，我添加了一个过滤器，它假设只在输入值 > 3 时触发 api 调用。

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

标签： javascriptangulartypescriptrxjsangular-reactive-forms

解决方案

不要使用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。

推荐阅读