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

Question

我正在使用 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 调用。

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

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()
});

然后您可以订阅搜索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.