在 Angular NGXS 中搜索来自不同组件的数据

本文介绍了在 Angular NGXS 中搜索来自不同组件的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我想弄清楚如何从不同的组件在 NGXS 中进行搜索.我有来自导航栏组件的搜索栏，而我正在显示来自应用程序组件的数据，这是一个不同的组件.请参阅此 stackblitz 链接点击这里

I'm trying to figure out how will i able to search in NGXS from different component. I have my searchbar from the navbar component while i'm displaying my data from app component which is a different component. Please see this stackblitz link CLICK HERE

代码

this.peopleForm.get('name').valueChanges.pipe(debounceTime(500)).subscribe(
  (name: string) => {
    console.log(name);
    this.people$ = this.store.select(AppState.nameFilter(name));
  }
)

推荐答案

看看您的 StackBlitz，您似乎正在尝试根据 peopleForm 输入元素中输入的内容过滤列表.

Having a look at your StackBlitz, it seems you are trying to filter a list based on what is entered in the peopleForm input element.

当这个值在组件中发生变化时，我没有尝试从 store 中进行选择，我发现一个很好的建模这个问题的方法是在 state 中存储搜索文本"，并使用 @Selector 将当前搜索值应用于列表返回满足条件的项目.

Rather than tryring to select from the store when this value changes in the component, I've found a good way to model this problem is to store the 'search text' in the state, and use a @Selector that applies the current search value to the list returns those items that meet the criteria.

看看这个答案，我在那里概述了这种方法.

Take a look at this answer where I've outlined this approach.

这篇关于在 Angular NGXS 中搜索来自不同组件的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！