FromEvent Keyup 过滤器未按预期工作

【问题标题】：FromEvent Keyup Filter is not working as expectedFromEvent Keyup 过滤器未按预期工作
【发布时间】：2019-11-24 23:14:25
【问题描述】：

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

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

【问题讨论】：

过滤器如何不工作 - 它是在长度为 2 或 1 后触发吗？该方法根本没有触发吗？需要更多信息。
我猜你把fromEvent的位置放错了。我建议使用角度反应形式来处理这个动作。

标签： javascript angular typescript rxjs angular-reactive-forms

【解决方案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.

【讨论】：