相关疑难解决方法(0)

覆盖 NGRX DefaultPersistenceResultHandler 的 handleSuccess

我在使用 @ngrx/data 时遇到了一些困难,希望你们中的一位天才可以帮助我。

我有一个实体集合,想存储一些额外的信息,以减少到服务器的往返次数并减少冗余负载。我有一个数据表,并且只想一次将一页加载到实体集合中,为了能够做到这一点,我想向我的集合中添加额外的元数据,以便我知道何时加载更多数据。例如,当我到达加载数据的末尾时加载更多(分页需要知道存在多少条记录以及加载了多少条记录)。

根据文档,我可以添加 additionalCollectionState 但需要某种方式来更新新的状态属性。

我想我会复制/粘贴他们作为基础的示例代码并修改它以反映我自己的属性..问题是我立即在 => Action上收到打字稿错误

通用类型“操作”需要 1 个类型参数

export class AdditionalPersistenceResultHandler  extends DefaultPersistenceResultHandler {

handleSuccess(originalAction: EntityAction): (data: any) => Action {
    const actionHandler = super.handleSuccess(originalAction);
    // return a factory to get a data handler to
    // parse data from DataService and save to action.payload
    return function(data: any) {
      const action = actionHandler.call(this, data);
      if (action && data && data.foo) {
        // save the data.foo to action.payload.foo
        (action as any).payload.foo = data.foo;
      } …
Run Code Online (Sandbox Code Playgroud)

ngrx angular

3
推荐指数
1
解决办法
454
查看次数

如何在 @ngrx/data 中扩展自定义实体集合缩减器

在阅读并尝试了迄今为止的所有内容以将我的additionalCollectionStates更新到我的EntityCollection(基于文档中的一些信息,这个SO问题另一个SO问题另一个SO问题github存储库中的一个问题)之后,我发现自己陷入了困境应该是一个相当常见的任务,并且在使用 ngrx 之前根本没有问题:使用 ngrx 对存储的实体集合进行排序。搜索解决方案让我回到我已经看过 5 次的 10 个链接,大多数示例要么太基础,要么过时,要么根本不使用 ngrx/data,或者类似的问题根本没有答案。

环境:Angular 9.1.7、ngrx 9.1.2、macOS 10.14.6

目标

按照排序和分页文档中的描述,将自己添加并更新additionalCollectionState到我的 EntityCollection 。我没有从服务器获取sortQuery属性(sortField、sortDirection),而是在 GUI 中设置它并根据它们对集合进行排序。我知道 EntityMetadataMap 上存在设置,但它对我来说不够灵活,我想动态地对应用程序中不同 MatTable 中的集合进行排序。只要 MatTable 中的排序顺序/字段发生更改,就应该更新此附加属性。sortComparer

到目前为止我所取得的成就:

如上所述,additionalCollectionState 的 ngrx/data 方式有效我的集合是用我在 EntityMetadataMap 中提供的数据初始化的。然而,更新自定义集合属性并不像我从文档中理解的那样工作。由于我没有从服务器获取sortQuery属性,因此不会调用 ResultsHandler。

我通过两种方式解决了这个问题:a)使用 ngrx 和 ngrx/entity 方法,b)通过尝试扩展自定义EntityCollectionReducer的 ngrx/data 方式

a) 我成功创建了自定义 Action 和自定义Reducer 并更新了状态属性,但没有更新之前定义的集合属性。我的行动基本上是:

export const selectResourceSortQuery = createAction('[Resource] Get …
Run Code Online (Sandbox Code Playgroud)

angular ngrx-entity angular-ngrx-data ngrx-data

3
推荐指数
1
解决办法
3205
查看次数