[英]Angular + ngRx how to Refreshing a component for a new state
I have a doubt about how to update a component, I am making a web app with Angular (lastest version) and I am using ngRx to manage the state.我对如何更新组件有疑问,我正在用 Angular(最新版本)制作一个 web 应用程序,我正在使用 ngRx 来管理 state。
my web has a Gridview with items where each item is a component (see the image)我的 web 有一个 Gridview,每个项目都是一个组件(见图)
Now, I want to update the data inside of ItemComponent, for example the first one item ( without add a subcriber in every Item component) but I don't know how to do it.现在,我想更新 ItemComponent 内部的数据,例如第一个项目(不在每个 Item 组件中添加订阅者)但我不知道该怎么做。
What is the best way to do this?做这个的最好方式是什么? I want to update any item totally independient between them because if I add a subscribe inside the ItemComponent then I will have to add an conditional to check the component id and exclude it if it's different
我想更新它们之间完全独立的任何项目,因为如果我在 ItemComponent 中添加一个订阅,那么我将不得不添加一个条件来检查组件 ID 并在不同时将其排除
I hope I have explained correctly我希望我解释正确
Grid view component template:网格视图组件模板:
<grid-view-item *ngFor="item of items$ | async" [item]="item"></grid-view-item>
Grid view component class:网格视图组件 class:
items$ = this.store.select(selectItems);
Grid view item component template:网格视图项组件模板:
<p>Name: {{ item.name }} </p>
// etc
Grid view item component class:网格视图项目组件 class:
@Input item: GridViewItem;
// call this depending on your implementation
onEdited(updatedItem: GridViewItem){
this.store.dispatch(gridViewItemUpdatedAction(updatedItem));
}
Reducer减速器
Replace the updated item, leave the rest as they are:替换更新的项目,保留 rest 不变:
on(gridViewItemUpdatedAction, (state, { updatedItem }) => ({
..state,
items: items.map(item => item.id === updatedItem .id ? updatedItem : item)
}),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.