我是NGXS的新手,并试图将其整合到一个小项目中。唯一的问题是没有关于状态的搜索/过滤器的好例子。
我的应用程序从后端API获取产品列表。它由SKU在页面上显示。我希望用户能够在输入字段中键入SKU,并让列表自动按用户类型过滤产品。
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:
@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:
<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文件吗?
任何帮助将不胜感激(尤其是stackblitz示例)!
如果您像这样建模您的状态,捕获基本产品列表和在搜索文本框中输入的文本,您可能会发现这更容易:
export interface ProductsStateModel {
products: Product[];
filterText: string; // Your SKU value that is entered
}
..然后在您的状态下,使用选择器投影您实际想要在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 });
}
..
}
在UI中,您可以在模板中订阅选择器,即在products.component.ts
中使用@Select(ProductsState.filteredProducts) products$
。
当搜索文本发生更改时,您可以向商店调度操作以更新状态中的字符串,即store.dispatch(new ProductSkuEntered({ skuText: enteredText }));
然后NGXS选择器将自动更新“filteredProducts”列表以仅显示与文本匹配的那些。
将debounceTime
连接到文本中的更改也很好,这样您只能在用户停止输入时进行过滤。即仅在去抖后派遣ProductSkuEntered
。
注意:我看到你正在使用NGXS表单插件 - 我没有使用该插件的经验,但这种情况不需要它(尽管你可能在其他地方使用它)。