在Angular NGXS中从不同组件搜索数据 [英] Searching Data From Different Component in Angular NGXS

问题描述

我试图弄清楚如何从不同组件中搜索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

CODE

CODE

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.

我发现在组件中更改此值时，不是尝试从存储中进行选择，而是找到了对这个问题进行建模的一种好方法，那就是将搜索文本"存储在状态中，并使用一个适用的@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屋！