搜索/过滤状态NGXS [英] Search / Filter State NGXS
问题描述
我是NGXS的新手,正在尝试将其集成到一个小型项目中.唯一的问题是,没有关于状态的搜索/过滤器的好例子.
I am new to NGXS and trying to integrate it into a small project. The only problem is that there are no good examples of a search / filter on state.
我的应用从后端API获取产品列表.在页面上按SKU显示它们.我希望用户能够在输入字段中输入SKU,并让列表根据用户类型自动过滤产品.
My app gets a list of products from a backend API. It shows them by SKU on the page. I want the user to be able to type in an SKU in the input field and have the list automatically filter products as the user types.
products.state.ts:
products.state.ts:
@Selector()
static getProductList(state: ProductStateModel) {
return state.products;
}
@Selector()
static prodFilter(searchObj: any[]) {
// something needs to happen here in order to filter state
}
products.component.ts:
products.component.ts:
@Select(ProductState.getProductList) products: Observable<Product[]>;
filterForm = this.fb.group({ sku: null });
constructor( private store: Store, private fb: FormBuilder ) { }
ngOnInit() {
this.store.dispatch( new GetProducts() );
}
//something in here (ngOnInit? ngOnChanges?) to pass (cloned??) product state into selector??
products.component.html:
products.component.html:
<form
[formGroup]='filterForm'
novalidate
ngxsForm='products.filterForm'
(ngSubmit)='onSubmit()'
>
<input type='number' formControlName='sku' />
<button type='submit'>Submit</button>
</form>
<mat-accordion class='product-accordion'>
<mat-expansion-panel *ngFor='let product of products | async'>
<mat-expansion-panel-header>
SKU: {{ product.sku }}
</mat-expansion-panel-header>
<p>${{ product.price }}</p>
<p>{{ product.description }}</p>
</mat-expansion-panel>
</mat-accordion>
我有很多问题.我认为我不应该直接改变产品状态,所以我可以克隆它吗? HTML的输出会改变吗?我应该为过滤后的产品创建一个新的state.ts文件吗?
I have so many questions. I believe that I shouldn't be mutating the products state directly so would I clone it? Would the HTML output change then? Should I create a new state.ts file for the filtered products?
任何帮助都将不胜感激(尤其是stackblitz示例)!
Any help would be much appreciated (especially a stackblitz example)!
推荐答案
如果您对状态进行如下建模,捕获基本产品列表和在搜索文本框中输入的文本,则可能会发现这更容易:
You might find this easier if you model your state like this, capturing the base products list and the text entered in the search textbox:
export interface ProductsStateModel {
products: Product[];
filterText: string; // Your SKU value that is entered
}
..然后在您的状态下,使用选择器投影出您实际要在UI(filteredProducts
)上显示的筛选列表.
.. Then in your state, use a selector to project out the filtered list that you actually want to display on the UI (filteredProducts
).
@State<ProductsStateModel>({
name: 'products'
})
export class ProductsState {
@Selector()
static filteredProducts(state: ProductsStateModel) {
return state.products.filter(p => p.sku === state.filterText);
}
@Action(ProductSkuEntered)
updateFilter({patchState}: StateContext<ProductStateModel>, {payload}: ProductSkuEntered) {
patchState({ filterText: payload.skuText });
}
..
}
在用户界面中,您可以在模板中然后订阅选择器,即在products.component.ts
中使用@Select(ProductsState.filteredProducts) products$
.
In the UI, you can in your template then subscribe to the selector i.e. in products.component.ts
use @Select(ProductsState.filteredProducts) products$
.
当搜索文本更改时,您可以向商店分派操作以更新状态为该字符串的字符串,例如store.dispatch(new ProductSkuEntered({ skuText: enteredText }));
NGXS选择器随后将自动更新"filteredProducts"列表,以仅显示与文本匹配的列表.
When the search text changes, you can dispatch an action to the store to update that string in the state i.e. store.dispatch(new ProductSkuEntered({ skuText: enteredText }));
The NGXS selector will then automatically update your 'filteredProducts` list to display just those that match the text.
将debounceTime
连接到文本更改中也很不错,以便仅在用户停止键入时才进行过滤.即仅在反跳后分派ProductSkuEntered
.
It's also nice to hook up a debounceTime
to the change in the text so that you only filter when the user has stopped typing. i.e. only dispatch the ProductSkuEntered
after the debounce.
注意:我看到您正在使用NGXS表单插件-我没有使用该插件的经验,但是这种情况不是必需的(尽管您可能会在其他地方使用它).
Note: I see you are using the NGXS forms plugin - I don't have experience with that plugin but it is not required for this scenario (although you might be using it elsewhere).
这篇关于搜索/过滤状态NGXS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!