Angular 使用NgRx将对象数据集成到组件中，并进行本地复制

在我的Angular应用程序中，我有一个带有一组过滤器的页面，这些过滤器可以切换，然后立即提交

我使用一个基本服务构建了它，它有一个过滤器对象（过滤器名称指向过滤器值）。此服务的数据结构复制到组件中的本地版本（

localFilters

），该版本在用户单击复选框等时更新。如果用户单击按钮提交筛选器，本地筛选器将设置为全局筛选器服务，如果用户未提交而退出，它不更新全局服务（退出时清除

localFilters

）

然而，我在获取使用此数据的组件以与服务保持同步以及其他使用此数据的组件时遇到了一些问题，因此我决定尝试使用NgRx，因为我知道这种基于可观察的模式对于Angular更为典型，并且之前在许多React项目中使用过Redux

不过，我在设置时遇到了重大问题，原因有两个：

我之前在服务中使用的模式涉及根据全局过滤器对象的状态在组件装载上设置一个

localFilters

对象。这些

localFilters

将用于确定页面上过滤器的启动状态，并在提交时进行全局设置。然而，对于NgRx使用的可观察模式，没有要复制的

过滤器

对象——只有一个可观察的对象，因此我不知道如何初始化

本地过滤器

对象。因此，我不知道如何从这个全局对象设置各种过滤器组件的默认状态

更基本地说，我不知道如何在模板中显示过滤器值（特别是在无法将其数据复制到本地对象时）。basic演示了如何使用

async

管道将数值合并到模板中，但是由于我的数据是对象形式的，并且我希望传递该对象的值，所以这种技术不起作用。基于上述链接，我尝试了以下尝试--

filters$| async

（显示

[Object Object]

）、

filters$.someKey | async

（不显示任何内容）和

（filters$| async）。someKey

（类似地，不显示任何内容）

基本上，最大的问题是如何访问存储在NgRx状态的对象的快照，以初始化此过滤器组件的本地状态，并在模板中呈现对象的值（或传递这些值）

还是我应该遵循更好的模式？（很难找到好的例子，我们将不胜感激）

下面是我的一些相关代码

操作文件：

从'@ngrx/store'导入{Action}；
导出枚举操作类型{
SetFilter='SetFilter'，
SetFilters='SetFilters'，
ClearFilters='ClearFilters'，
}
导出类SetFilter实现操作{
只读类型=ActionTypes.SetFilter；
构造函数（公共名称：string，公共值：any）{}
}
导出类SetFilters实现操作{
只读类型=ActionTypes.SetFilters；
构造函数（公共筛选器：对象）{}
}
导出类ClearFilters实现操作{
只读类型=ActionTypes.ClearFilters；
}
导出类型ActionsUnion=SetFilter | SetFilters | ClearFilters；

还原程序文件：

import*作为来自“/actions”的筛选器操作；
导出接口状态{
过滤器：对象
};
导出常量initialState:状态={
过滤器：{wassup:'true'}//用一些无意义的东西测试初始状态
};
导出函数缩减器（状态=初始状态，操作：FilterActions.ActionsUnion）{
开关（动作类型）{
案例过滤器Actions.ActionTypes.SetFilter：{
返回{…state[action.name]：action.value}；
}
案例过滤器Actions.ActionTypes.SetFilters：{
返回{…state，…action.filters}；
}
案例过滤器Actions.ActionTypes.ClearFilters：{
返回{}；
}
默认：返回状态；
}
}

缩写的AppModule：

从'@ngrx/store'导入{StoreModule}；
从“/ngrx/filters/reducer”导入{reducer}；
@NGD模块({
声明：[……]，
进口：[
...,
forRoot（{filters:reducer}）
],
...
})

以及相关component.ts文件的缩写版本：

@组件({
选择器：“应用程序基本筛选器”，
templateUrl:'./base filter.component.html'，
样式URL:['./base filter.component.scss']
})
导出类BaseFilterComponent实现OnInit{
/**对象，该对象具有给定筛选关键字的选定索引*/
SelectedDices:any={}；
/**本地复制所有筛选器，以便在提交时保存，在取消时清除*/
localFilters:any={}；
过滤器$：可观察；
构造函数（私有存储：存储）{
this.filters$=store.pipe（选择（'filters'）；
this.initLocalFilters（）；
}
ngOnInit（）{}
//这适用于旧的filtersService模型
//但很明显，它在这里被破坏了，因为我还不能初始化
//localFilters正确。
initLocalFilters（）{
this.localFilters={}；
//从过滤器服务中填写预先选择
['this'、'是一个列表'、'过滤器名称'、'选项数组']
.forEach（（arrayKey）=>{
//所选索引在模板中用于传递给子级
//组件并确定所选内容。
this.selectedDices[arrayKey]=（this.localFilters[arrayKey]| |[]）
.map（t=>this[arrayKey].indexOf（t））；
});
}
});

顺便说一句，我在上述组件构造函数中尝试了以下一些方法：

//不会抛出错误，但不会进入回调
this.store.select（数据=>{console.log（数据）}）；
//不会抛出错误，但在循环中未定义筛选器
this.filters$=store.pipe（选择（'filters'）；
this.filters$.forEach（filter=>{console。