我有一个自动完成输入域,它对用户输入做出react 并执行搜索功能.我设置了一个过滤器,以便只有在输入值超过两个字符时才开始搜索.因为我在*ngFor循环中显示了options$,所以如果过滤器触发,我想返回一个空数组,所以下拉列表不会显示任何结果.

如果用户开始打字,这很好用,但如果他们删除了整个输入,最后一次搜索的结果仍然可见.

So basically what I would like to do is return an empty array, if the filter statement triggers.

public control = new FormControl()

this.options$ = this.control.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  filter((val) => val.length > 2),
  switchMap((search) => this.filterFunc<T>(search))
);

我试图引入另一个布尔值,它可以处理下拉列表的打开和关闭状态,但我认为必须有一种方法来实现这一点,而不需要强制设置值.

推荐答案

您实际上并不想进行筛选,因为如果流的长度小于2,则Filter将完全阻止流发送值,但在这种情况下,您确实想做一些事情(返回一个空数组),而不是真正地对其进行筛选.

因此,您可以go 掉filter,并在switchMap本身中处理此案件:

public control = new FormControl()

this.options$ = this.control.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap((search) => search.length > 2 ? this.filterFunc<T>(search) : of([]))
);

Angular相关问答推荐

to Signal on Observables inside Signal

Angular中绑定嵌入标签src属性的问题

将kendo—colorpicker的kendo弹出窗口附加到组件''

自动完成搜索过滤器不适用于Angular 中动态添加的输入字段

从、管道和映射可观察到的逻辑?

如何重新显示ngbAlert(Bootstrap widgest for Angular)消息后再次驳回它

代码优化以删除Angular中的嵌套订阅

如何将Angular 服务包含在延迟加载的独立组件路由中?

如何使用Angular 将图像作为二进制数据发送到我的API?

如何将 Firebase 云消息传递 (FCM) 与 Angular 15 结合使用?

URL 更改但组件未在 Angular 导航中呈现

nx workspace angular monorepo 在创建新应用程序时抛出错误

Angular:为什么在我的自定义 ErrorHandler 中订阅主题不触发?

在组件级别加载 JS 脚本(不在启动时)

ngx-bootstrap modal:如何从模态中获取返回值?

如何在 Angular 4 中使用 Material Design 图标?

NgrxStore 和 Angular - 大量使用异步管道或在构造函数中只订阅一次

从 angular2 模板调用静态函数

Angular2中是否有像window.onbeforeunload这样的生命周期钩子?

我应该在 Angular 4+ 应用程序中 for each 组件创建一个模块吗?