问题标签 [angular-ngrx-data]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
978 浏览

angular-ngrx-data - 使用 ngrx-data 如何配置应用程序以从特定 url 获取特定实体的数据

如果我们按照 ngrx-data 示例并查看Entity DataService,我们可以在没有任何配置的情况下获取我们在内存中(硬编码)的 Hero 数据。默认值将与我们配置的相同:

在例如:EntityStoreModule

问题:

我们将如何配置我们的应用程序以从默认源获取实体“英雄”的数据:

和来自 URL 的实体“Villans”的数据:

以及来自其(其他/各种)各自URL的其他实体的数据......?

0 投票
1 回答
115 浏览

nestjs - 客户端是带有 NgRx-Data 的 Angular 8;服务器是 NestJs + MySQL。如何使用条件和 SQL 获取数据?

随着 Angular、NgRx-Data 和 NestJs 越来越流行,我觉得可能有不少程序员对以下查询语法感到疑惑。

我有一个使用 Angular 8 和 NgRx-Data 组成的客户端(前端)的运行原型。后端是基于 NestJs 的服务器 + MySQL。

除了查询之外,我可以很好地在所有部分之间检索和传递数据。我似乎无法找到有关语法的适当文档。

以下是如何设置客户端的示例:

实体服务/用于获取数据

显示数据的组件

这是与服务器相关的代码摘录:-(有一个服务,但为了简单起见,我将 repo 函数移至控制器函数):

请查看每个代码行上方的注释 - 问题已在此处详细说明。

以下是重要的问题:

在客户端,我们如何正确传递其中一些示例的查询条件: - {'age > 20'} - {'age BETWEEN 20 AND 40'} - {'age = 20 OR age = 30 OR age = 40'} - {'name = "Superman"'} - {'name LIKE "Super%"'} - 等等。

此外,传递完整 SQL 语句的语法是什么,例如: - {'SELECT * FROM Heroes WHERE name LIKE "Super%" AND Age > 20;'} 并从服务器获取结果。

为了使这些查询正常工作,两端(客户端和服务器)需要做什么?

非常感谢所有输入。

0 投票
1 回答
222 浏览

angular - 如何使用 NgRX 数据更新存储?

我的组件结构

在此处输入图像描述

如果 case.component 将案例数据缓存在商店的案例实体中,那么我从子组件(案例操作、案例活动......等)中获取该数据。

但是当我从任何子组件远程更新案例时,我不知道如何刷新父组件(case.component)中的缓存数据以再次将其复制到子组件上。

我正在尝试使用最佳实践。

0 投票
0 回答
78 浏览

angular - 使用 ngrx/store 在两个不同的 Angular 应用程序之间共享存储/操作

我在这里是因为我需要一些我需要做的事情的支持。

我正在使用 NG4 + ngrx/store 进行项目。

App1 和 App2 基本上是 2 个不同的 Angular 项目。它们不在同一棵树中,也不在同一个应用程序中。

我希望能够在 1 和 2 之间共享商店。

可能吗?

您有什么建议,提示,如何实现这一目标?

演示示例将有助于我理解这个概念。

提前致谢

0 投票
0 回答
272 浏览

angular - 订阅从ngrx的实体收集服务返回的observable没有返回正确的结果

我通过驱动我的服务来创建服务

我的实体称为事务。

我正在像这样覆盖 getAll 方法

我在适当的地方将此 getAll 称为。

所以在我想使用它的组件中,我正在使用这个服务的“entities $”属性,就像这样

因此,当我使用 asyn 运算符在 html 中使用它时,这个变量“this.last6MonthWithdrawCount$”可以正常工作。

但是当我想通过订阅它来读取它在代码中的值时

我没有得到适当的价值。我得到 0 。看起来它给了我流中的第一个价值。

如何获得最后一个值? 更新 或者只是我如何从代码中的 this.last6MonthWithdrawCount$ 获取值。实际上这个值应该被传递给图形数据。我有显示值的图表,而且我必须在图表的数据数组中传递相同的值。

在此处输入图像描述

这个值 45(与值 10 相同的东西)来自上面提到的实体 $.pipe 代码,在 html 中我正在做一个简单的 | 如上所述的异步,它可以工作。

我必须在我的 chartJS 图表的数据中传递相同的 2 个值。

如何从那个 observable 中得到这个值?与在 html 中工作的相同。

0 投票
0 回答
132 浏览

ngrx - ngrx/data 向现有集合添加新属性

我目前正在使用NgRx/data并且我有 2 个集合:CoursesLessons

我在他们的文档中发现了一些东西来覆盖EntityCollectionReducer

AdditionalEntityCollectionReducerMethods中,我重写了一些方法来添加新属性:

同样在course.module.ts中,我在entityMedatata中将此属性指定为additionalCollectionState

AdditionalEntityCollectionReducerMethods 在app.module.ts中注册为提供者:

因此,通过这种方式,我在Courses集合中添加了一个名为save的新属性。但我的问题是,如果我在其他模块中使用saveAddOne方法,保存属性也会在这里添加,我不想要这个。

我认为发生这种情况是因为我已经在 app.module 中注册了AdditionalEntityCollectionReducerMethodsFactory 但是我尝试在course.module中注册它并进行调试,但是断点没有被击中(仅在app.module中)。我还必须提到course.module是延迟加载的。

是否有可能仅在一个特定集合中添加新属性?

0 投票
1 回答
1018 浏览

angular - Angulat 9 NgRx 数据添加方法 - 使用查询参数创建自定义端点;

我在 Angular 9 项目上使用 NgRx 数据,我正在尝试使用 add() 方法保存用户。缺点是 api 端点类似于

http://localhost:{{port}}/something/{{clientId}}/users

用户组件

用户服务

有没有办法解决这个问题?我不想修改后端端点。

0 投票
3 回答
4400 浏览

angular - 在集合“@schematics/angular”中找不到示意图“商店”

我使用以下命令安装 ngrx/store:

然后我想添加商店

得到以下错误:

发生未处理的异常:集合“@schematics/angular”中未找到原理图“存储”。有关详细信息,请参阅“xxx\angular-errors.log”。

0 投票
1 回答
1737 浏览

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

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

环境:Angular 9.1.7,ngrx 9.1.2,macOS 10.14.6

目标

如排序和分页文档中所述,将own 添加和更新additionalCollectionState到我的 EntityCollection 中。我没有从服务器获取sortQuery属性(sortField、sortDirection),而是在我的 GUI 中设置它并根据它们对集合进行排序。我知道 EntityMetadataMap 上存在设置,但它对我的方式不够灵活,我想在整个应用程序中对不同 MatTables 中的集合进行动态排序。每当 MatTable 中的排序顺序/字段发生更改时,都应更新此附加属性。sortComparer

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

如上所述的附加CollectionState 的ngrx/data 方式有效,我的集合使用我在EntityMetadataMap 中提供的数据进行初始化。但是,更新自定义集合属性并不能按照我从文档中理解的方式进行。由于我没有从服务器获取sortQuery属性,因此不会调用 ResultsHandler。

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

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

它是从服务中调用的:

并在减速器中处理:

reducer 在 reducers/index.ts 中导出:

在 app.module 中设置为:

这将创建一个带有sortQuery属性的resourceSort集合,如该屏幕截图所示:并根据更改后的 sortQuery 属性对其进行更新。但是,我更喜欢在 Resource entityCache 集合中使用已经初始化的 sortQuery 属性(是的,我也尝试将其添加到entityCache功能中并忽略它):在此处输入图像描述 StoreModule.forFeature('entityCache', reducers)

在此处输入图像描述

b) 因此,另一种方法是在 app.module 中使用 EntityCollectionReducerRegistry:

从文档:

Entity Reducer 是存储实体缓存中所有实体集合的主 reducer。该库没有命名实体减速器类型。相反,它依赖于 EntityCacheReducerFactory.create() 方法来生成该 reducer,它是一个 NgRx ActionReducer<EntityCache, EntityAction>。

我有一种感觉,使用 b) 方法我可能走在正确的轨道上,但是我被缺乏如何处理这个问题的文档和示例所困扰 - 有没有人可以帮助我?

如果需要更多详细信息,我很乐意提供,如果有不清楚的地方,因为英语不是我的母语,我很乐意澄清,如有必要,请尝试提供一个简化的 stackblitz 示例。谢谢!

0 投票
1 回答
244 浏览

angular - 如何订阅从 ngrx 的实体数据服务返回的 Observable

我有一个名为 TransactionEntityService 的服务,它从 EntityCollectionServiceBase 派生,用于一个名为 Transaction 的模型。

我正在使用 TransactionDataService 来覆盖 DefaultDataService 的默认行为。在 AppModule TransactionDataService 中是这样注册的

和 TransactionsDataService 覆盖 getAll 如下所示。

实体服务的“$entitie”属性在调用 api 后返回正确的结果。我正在过滤该结果以计算名为 last6MonthDepositCount$ 的 observable 中的某些内容。

在 html 中我可以使用这个 observable

有用。

我应该怎么做才能在我的代码中的另一个变量中使用这个 observable 的值?

这种代码不起作用。我在 dipositCount 中得到 0,它看起来像 observable 的初始值。

在此处输入图像描述