首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular Ngrx store -store.select(‘选择器名称’)应该返回图书列表,但它返回的列表是不可迭代的

Angular Ngrx Store是Angular框架中的一个状态管理库,用于管理应用程序的状态。它基于Redux架构模式,通过将应用程序的状态存储在一个单一的存储中心中,并使用纯函数来处理状态的变化,从而简化了状态管理的复杂性。

在使用Angular Ngrx Store时,可以使用store.select('选择器名称')方法来选择存储中心中的特定状态。根据问题描述,store.select('选择器名称')应该返回图书列表,但实际上返回的列表是不可迭代的。

这种情况可能是由于以下原因导致的:

  1. 选择器名称错误:请确保选择器名称正确地指向了存储中心中的图书列表状态。可以检查选择器名称是否正确拼写,并且与存储中心中定义的选择器名称一致。
  2. 存储中心中的状态未正确更新:可能是由于在更新图书列表状态时出现了错误,导致返回的列表不可迭代。可以检查存储中心中的相关代码,确保在更新图书列表状态时没有出现错误。
  3. 数据类型不正确:返回的列表可能是一个非迭代的数据类型,例如对象而不是数组。可以检查存储中心中的代码,确保返回的列表是一个可迭代的数组类型。

针对这个问题,可以尝试以下解决方案:

  1. 检查选择器名称是否正确,并与存储中心中的选择器名称保持一致。
  2. 检查存储中心中的代码,确保在更新图书列表状态时没有出现错误。
  3. 确保返回的列表是一个可迭代的数组类型,而不是一个非迭代的对象类型。

如果以上解决方案都没有解决问题,可以提供更多的代码和上下文信息,以便更好地理解问题并给出更具体的解决方案。

关于Angular Ngrx Store的更多信息和使用方法,可以参考腾讯云的相关产品和文档:

  • 腾讯云产品:云开发(https://cloud.tencent.com/product/tcb)
  • 腾讯云文档:云开发 - Angular Ngrx Store(https://cloud.tencent.com/document/product/876/41784)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

从版本2开始,Angular不再一个JavaScript框架,所以它们之间有很大区别,保证了一个基本名称变更。 我应该使用Angular吗?...当我们描述了我们组件职责时,显然这应该是一个卡片列表组件。...State一个单一不可数据结构 - 至少Ngrx为我们实现它方式。Ngrx由Redux提供灵感“RxJS支持Angular应用程序状态管理库”。 Ngrx灵感来自Redux。...除了这些案例陈述之外,我们绝不应该改变我们状态,否则当我们浪费时间寻找我们代码行为不可预测原因时,它会使生活变得悲惨。 让我们将Ngrx添加到我们应用程序中。...Ngrx效应 那么什么副作用?它代码片段Actions或多或少地与我们缩减器相同,但它不是在我们状态中改变某些内容,而是实际发送API请求,并根据结果派发新代码Actions。

42.6K10
  • Angular vs React 最全面深入对比

    虽然Angular第一个积极采用TypeScript主要框架,但它也可以与React一起使用。 RxJS RxJS一个响应式编程库,可以灵活地处理异步操作和事件。...无论如何,当你使用Angular时,您至少应该了解RxJS基本知识。...@ngrx/store @ngrx/store由Redux启发Angular状态管理库,基于由pure reducer进行突变状态。...根据官方文档,Angular版本升级会以比较快速度进行迭代 无论大版本6个月迭代,还是每周hotfix,能看出Angular团队想用快速升级策略迅速占领市场。...契合度 无论哪个框架,适合自己才是“好“,所以需要你从项目(产品)本身角度去衡量,以下问题列表可能并不全面,但至少可以作为一个开始 该项目(产品)有多大规模? 要维护多久?

    3.8K70

    Pandas 2.2 中文官方教程和指南(十·二)

    这些返回一个结果Series,由行号索引。目前这些方法不接受where选择器。...其思想有一个表(称之为选择器表),你在这个表中索引大部分/全部列,并执行你查询。其他表数据表,其索引与选择器索引匹配。然后你可以在选择器表上执行非常快速查询,同时获取大量数据。...如果在列表位置使用None,那么该表将具有给定 DataFrame 其余未指定列。参数selector定义了哪个表选择器表(你可以从中进行查询)。...迭代 iterator 布尔值,默认为False 返回用于迭代或使用get_chunk()获取块TextFileReader对象。...chunksizeint,默认为None 返回用于迭代TextFileReader对象。请参阅下面的迭代和分块。

    29400

    Angular 2 + 折腾记 :(3)初步了解服务及使用

    前言 不探究高深理论,只探究实际使用,有更好写法或者经验请指出; 有些暂时没涉及到知识我可能会顺着例子解释; ---- 什么服务 简言之:就是资源获取,以及通讯逻辑处理地方; Angular2.../environments/environment'; // 不可忘记括号,任何装饰器都一样,防止莫名错误 @Injectable() export class VehicleFaultService...this.authHttp.post(environment.baseUrl + 'VehicleFault/VehicleFaultList', data); } // 获取单个车辆故障列表...{ return this.authHttp.post(environment.baseUrl + 'VehicleFault/ClearFault', data); } // 这里每个接口返回一个可观察订阅对象...这种状态管理 服务可以贯穿全局(全局注入),事件广播这些都可以实现 服务不应该太重(比如处理一些复杂逻辑),一个服务内部应该清晰,简洁。。

    1.6K20

    前端架构101:MVC不足与Flux崛起

    这也和上一条「不可预测」相对应 响应顺序:如果存在多个对象响应同一个事件的话,有时候对响应顺序有要求,某些变更不可以出现在其他变更之前 有条件响应:对于传播方而言,并非希望所有的时间都一视同仁广播出去...,然后提交新数据,再刷新数据列表 负责为不同 dom 元素绑定事件处理函数 不说大道理,和当下 React 或者 Angular 组件相比,直接后果这些模块无法复用。...注意 store 层工作不会引起任何副作用,在 store 完成上一个 action 工作之前,不会有其他 action 再次经过 dispatch 达到 store。...同时使用 command 模式来避免事件机制造成不可预测性。剩下具体概念你应该非常熟悉了 现在回过头再看 Flux,它其实是一个非常强约束框架。...如果你开发 Angular 应用,Angular 本身,或是 Rxjs 又或是 TypeScript 哪一个单拎出来都不好对付,指望着人们自我学习或者培训方式统一大家水平更是天方夜谭。

    1.4K20

    AngularDart4.0 英雄之旅-教程-05多组件 顶

    一开始,它展示了一个英雄细节。 然后,它成为一个英雄和英雄细节列表主/细节形式。 很快就会有新要求和能力。 您不能在一个组件之上填充所有功能; 这是不可维护。...@Component注解提供组件Angular元数据。 CSS选择器名称hero-detail将与在父组件模板中标识该组件元素标签相匹配。...import 'src/hero_detail_component.dart'; 回想一下,hero-detailHeroDetailComponent元数据中CSS选择器。...您学会了在 directives列表中声明应用程序指令。 您学会了将父组件绑定到子组件。 你应用应该看起来像这个实例(查看源代码)。...前方路 “The Tour of Heroes ”游戏应用程序可以更多地使用共享组件,但其(模拟)数据仍然在AppComponent中硬编码。 这是不可持续

    1.8K10

    AngularDart4.0 指南- 模板语法二 顶

    您可以定义一个HTML块来定义应该如何显示单个项目。 您告诉Angular将该块用作呈现列表中每个项目的模板。...字符串“let hero of heroes”指: 取英雄列表每个英雄,将其存储在本地英雄循环变量中,并使其可用于每次迭代模板HTML。...模板输入变量 hero之前let关键字创建一个名为hero模板输入变量。 ngFor指令迭代由父组件heroes属性返回heroes,并在每次迭代期间将hero设置为列表中的当前项目。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道一个很好选择。 管道简单函数,它接受一个输入值并返回一个转换后值。...更糟,整个视图消失。 如果hero属性不能为空,这将是合理行为。 如果它永远不能为空,但它是空,这是一个应该被捕获和修复编程错误。 抛出异常是正确

    30K20

    AngularDart4.0 指南- 显示数据 顶

    最终用户界面如下所示: ? 现场示例(查看源代码)演示了此页面中描述所有语法和代码片段。 用插值显示组件属性 显示组件属性最简单方法通过插值来绑定属性名称。...请注意,您不要调用new来创建AppComponent类实例。 Angular正在为你创建一个实例。 怎样创建? @Component注解中CSS选择器指定了一个名为元素。...元素中* ngForAngular“repeater”指令。...在“模板语法”页面的microsyntax部分阅读有关模板输入变量更多信息。 Angular列表每个项目复制,将hero变量设置为当前迭代项目(英雄)。...在实际应用中,大多数绑定是针对更专业化对象。 要将此绑定转换为使用专用对象,请将英雄名称列表转换为Hero对象列表。 为此,你需要一个Hero类。

    5.3K10

    像数据库一样设计你 redux 数据结构

    最近我在RC聊天系统浏览关于 JavaScript 一些讨论时,注意到了Kate Ray一个问题: 应该怎样在 redux 存储中结构化我数据? 的确,这是使用redux时最常见问题之一。...有很多需要考虑东西,你经常会像访问一个行列表一样遍历数据吗? 你需要以O(1)时间复杂度快速访问某些条目吗? 我在实践中得到了一些经验,通常在访问时间和迭代难易程度之间做一些权衡。...索引力量 请注意,我们上面介绍结构只是一些行索引,索引id。...把你存储数据想象成为图书馆,可以用索引快速找到任何项目 Normalizr与Reselect 这里描述模式正是Normalizr库所使用模式。...Redux 和 Normalizr 与 Reselect 配合也很好,如果你关心性能,并且喜欢有一个中央列表记忆选择器,可以关注一下。

    1.3K20

    AngularDart4.0 指南-体系结构概述 顶

    该类通过属性和方法API与视图交互。  例如,这个HeroListComponent有一个heroes属性,返回从服务中获取英雄列表。...以下一些可能@Component参数: selector:CSS选择器,告诉Angular创建并插入这个组件一个实例,它在父HTML中找到一个标签。...组件类应该是精益。 他们不从服务器获取数据,验证用户输入或直接登录到控制台。 他们将这些任务委托给服务。 一个组件工作启用用户体验,仅此而已。...如果请求服务实例不在容器中,那么在将服务返回Angular之前,注入器将创建一个并将其添加到容器中。 当所有请求服务已经解析并返回时,Angular可以用这些服务作为参数调用组件构造函数。...但它并不包括你需要知道一切。 以下其他重要Angular功能和服务简短字母顺序列表。 Forms:支持基于HTML验证和脏检查复杂数据录入方案。

    7.9K30

    产生和加载数据集

    逐行读取文件 逐行读取第一种方法直接通过循环对文件对象进行操作,每次读取出一行行末换行符可通过 restrip()函数删除 第二种方法直接调用文件对象 readline()方法,该方法将会返回一个字符串组成列表...内置 csv 模块,要使用它需要把打开文件 fp 传到 csv.reader()中(返回迭代对象)。...与访问文本文件不同,这两个函数都有一个 sheet_name 参数用来表示读取名称或者保存名称。...npy 二进制文件用numpy.save()函数,保存多个数组到一个后缀名为.npz 文件用到函数numpy.savez() (按照传入函数参数先后顺序进行保存,可以通过变量名=数组名形式给保存数组赋予名称...] = frame['a'] store store['obj1'] store.put('obj2', frame, format='table') #相当于赋值操作不过允许更加多元存储格式设定 store.select

    2.6K30

    AngularDart4.0 高级-属性(Attribute)指令 顶

    属性CSS选择器方括号中属性名称。这里指令选择器[myHighlight]。 Angular定位模板中具有名为myHighlight属性所有元素。...虽然highlight比myHighlight更简洁名字,并会工作,最佳做法选择器名称加上前缀,以确保它们不与标准HTML属性发生冲突。这也降低了与第三方指令名称相冲突风险。...请确保您不要对highlight指令名称使用ng前缀,因为该前缀Angular保留,并且使用它可能会导致难以诊断错误。对于简单演示,简短前缀my可以帮助区分您自定义指令。...还原原始属性名称,并将选择器指定为@Input参数中别名。...虽然函数指令无状态但它们可能不纯(利用全局状态),正如autoId指令所示。

    3.2K10

    AngularDart4.0 高级-组件样式 顶

    Angular应用程序使用标准CSS进行样式化。 这意味着您可以将所有关于CSS样式表,选择器,规则和媒体查询知识直接应用于Angular应用程序。...一种方法在组件元数据中设置styles属性。 styles属性采用包含CSS代码字符串列表。...您可以在每个组件上下文中使用最有意义CSS类名称选择器。 类名和选择器组件本地,不会与应用程序中其他地方使用类和选择器相冲突。 应用程序中其他位置样式更改不会影响组件样式。...它们自动生成并且你未在应用代码中涉及到. 但它们通过生成组件样式被定向,在DOM中区块 : ....因为这些文件与组件本地协作, 通过名字引用它们是非常不错 除此而外也可以指定一个路径返回到应用根.

    2.2K20

    给2019前端开发你5个进阶建议~

    由于历史原因,开发框架同时基于 React 和 Angular,考虑到产品复杂性、人员短缺和技术背景各异,我们尝试了各种方法打磨工具体系来提升开发效率,以下节选5项主要方法。...我们先后尝试过原生 Redux、分形 Fractal 思路、自研类 Mobx 框架、Angular Service,最终认为 Redux 依旧复杂应用数据流处理最佳选项之一。...庆幸除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...对于 Fetch 返回数据我们定义了 AsyncTuple 这种类型,减少了样板代码 明确组织结构,第1层 ROOT,第2层各个页面,第3层页面内的卡片,第4层卡片数据,这样划分最深处基本不会超过...曾经 React 和 Angular 两个很难调和框架,开发中浪费了我们大量的人力。

    1K10

    VUE面试题

    答:全局定义指令:在vue对象directive方法里面有两个参数,一个指令名称,另外一个函数。...应用级状态集中放在store中; 改变状态方式提交mutations,这是个同步事物; 异步逻辑应该封装在action中。 20、vue-loader是什么?使用它用途有哪些?...答:上万级数据需要瀑布流更新和搜索时候,因为数据庞大时候,用原生dom操作js和html都会有列表html布局,迭代很困难。再一个dom节点大面积添加会影响性能。...situation 一个常见场景, 主页 -->前进 列表页-->前进 详情页,详情页 -->返回 主页 -->返回 列表页 我们希望, 从 详情页 -->返回 列表时候页面的状态缓存,不用重新请求数据...从 列表页 -->返回 主页 时候页面,注销掉列表页,以在进入不同列表时候,获取最新数据。 task 今天 让我们来实现这个需求。 在 代码世界里 解决问题 方法 从来都不止一种。

    2.8K22

    AngularDart4.0 英雄之旅-教程-07路由 顶

    添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...RouterLink指令告诉路由在用户点击链接时位置。 您使用链接参数列表定义了一个路由指令, 这个列表在我们小样本中只有一个元素,引用路由名称。...应该显示英雄11详细信息。 在仪表板或英雄列表中选择英雄不起作用。 你会接下来处理。...该列表包含两个元素:目标路由名称和设置为当前英雄id值路由参数。...用户可以在应用程序周围进行导航,从仪表板到英雄详细信息,然后返回,从英雄列表到英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。 风格化应用程序 该应用程序功能,但它需要样式。

    17.6K30

    浅谈前端状态管理(下)

    (接收书本) Store图书馆管理员) Store 可以看作一个容器,整个应用只有一个 Store。...(既拿到单子将你书本打包装袋等) Reducer 一个自定义函数,它接受 Action 和当前 State 作为参数,返回一个新 State。...尽管在 Redux 里还是没办法做到一切都是确定(如异步)但是应该保证大多数部分都是确定包括: 视图渲染可确定 状态重建可确定 至于为什么要这么做,上一篇我已有提及。...(当然你想用 Redux 也没问题,咱们只是探索更多方式) 还是用图书馆来举例子,现在有一个图书馆管理系统,你从列表页(list)跳入详情页(detail)需要保存列表状态(如搜索栏状态等)。...,这是因为 HOC 返回父组件调用了原组件方法,到导致列表页请求两次,渲染两次。

    89420

    AngularDart 4.0 高级-管道 顶

    它必须有效Dart标识符。 你管道名称是exponentialStrength。 PipeTransform接口 transform方法对于管道不可。...飞行英雄管道 将一个FlyingHeroesPipe添加到*ngFor迭代器,该迭代器将英雄列表过滤到只能飞行英雄。...替换列表发信号通知Angular更新显示有效方式。 你什么时候更换清单? 数据发生变化时。 在这个例子中,这是一个简单规则,其中更改数据唯一方法添加一个英雄。...组件应该不知道管道。 为了过滤飞行英雄,请考虑一个不纯管道。 纯净和不纯管道 有两类管道:纯净和不纯。 管道默认纯净。 到目前为止,你看到每个管道都是纯净。...纯函数处理输入并返回值,但没有可检测到副作用。 给定相同输入,他们应该总是返回相同输出。 本页前面讨论管道用纯函数实现。 内置DatePipe一个纯函数实现纯管道。

    6.4K20

    AngularDart 4.0 高级-结构指令 顶

    这些两个NgFor输入属性名称。 这就是指令如何得知列表heroes,并且track-by功能trackById。 当NgFor指令遍历列表时,它会设置并重置其自己上下文对象属性。...NgIf或NgFor应该先走哪一个? NgIf能否取消NgFor效果? 如果这样(并且看起来应该如此),Angular应该如何概括取消其他结构指令能力? 这些问题没有简单答案。...结构指令使起作用,就像您在编写自己结构指令时看到一样。 兄弟元素组 根元素通常能且应该成为结构指令宿主,列表元素()NgFor迭代典型宿主元素。...括号定义了一个CSS属性选择器。 指令属性名称应使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular。 选择适合您或您公司简短内容。...在这个例子中,前缀my。 指令类名称以Directive结尾。 Angular自己指令不会。

    16.1K20
    领券