时间戳

首页 > 解决方案 > 使用 ngrx/selector 和 ngrx/entities 接收具有特定键的数组

angular - 使用 ngrx/selector 和 ngrx/entities 接收具有特定键的数组

问题描述

如何使用选择器仅通过某个键获取数据？

也就是说，我有 4 个菜单，每个菜单都有一个特定catalogCode的 ，用户在单击时从服务器获取特定菜单的列表。此列表的每个元素都有一个id = code + catalogCode. 也就是说，catalogCode这个菜单的所有元素都是相同的。那么如何catalogCode从商店中获取特定商品的列表呢？

我正在尝试这样做：selectByCatalogCode

export const selectCatalogItemState: MemoizedSelector<object, State> = createFeatureSelector('CatalogItem');
export const selectCatalogItemAll: MemoizedSelector<object, CatalogItem[]> = createSelector(selectCatalogItemState, selectAll);
export const selectByCatalogCode = () => createSelector(selectCatalogItemAll, (entities: CatalogItem[], props: { catalogCode: string }) => entities[props.catalogCode]);

但这在组件中使用时不起作用，总是显示未定义的值

  getCatalogItems(catalogCode: string) {
    this.catalogItemStore.dispatch(new CatalogItemStoreAction.LoadByCatalog({catalogCode: catalogCode}));
    this.catalogItemStore.select(CatalogItemStoreSelector.selectByCatalogCode(), {catalogCode: catalogCode}).subscribe(
      a => console.log(a)
    );
  }

目录项.ts

export class CatalogItem {
  constructor(public code: string,
              public catalogCode: string,
              public title: string,
              public data: object) {
  }
}

我只提供了部分代码。如有需要，我可以提供整个店铺的代码。

效果.ts

  @Effect()
  getCatalogEffect$: Observable<Action> = this.action$
    .pipe(
      ofType<featureAction.GetByCatalog>(featureAction.ActionTypes.GET_BY_CATALOG),
      switchMap(action => this.store.select(CatalogItemStoreSelector.selectByCatalogCode(action.payload.catalogCode))
        .pipe(
          take(1),
          filter(catalogItems => !catalogItems),
          map(() => new featureAction.LoadByCatalog({catalogCode: action.payload.catalogCode})),
        )
      )
    );
  @Effect()
  loadByCatalog$: Observable<Action> = this.action$
    .pipe(
      ofType<featureAction.LoadByCatalog>(featureAction.ActionTypes.LOAD_BY_CATALOG),
      switchMap(action => this.catalogItemService.listByCatalog(action.payload.catalogCode)
        .pipe(
          map(catalogItems => new featureAction.LoadByCatalogSuccess({catalogItems: catalogItems})),
          catchError(error => of(new featureAction.LoadByCatalogError({error: error}))),
        )
      )
    );

目录-list.component.ts

  getCatalogItems(catalogCode: string) {
    this.catalogItemStore.dispatch(new CatalogItemStoreAction.GetByCatalog({catalogCode: catalogCode}));
  }

标签： angularngrxngrx-storengrx-entity

解决方案

在您的选择器中，如果您想获取与您的目录代码匹配的对象，请使用过滤器。

TS：

this.catalogItemStore.select(CatalogItemStoreSelector.selectByCatalogCode(catalogCode)).subscribe(
      a => console.log(a)
    );

选择器：

export const selectByCatalogCode = (catalogCode: string) => createSelector(selectCatalogItemAll, (entities: CatalogItem[]) => entities.filter((item: CatalogItem) => item.catalogCode === catalogCode));

推荐阅读