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

ngrx 4选择器不更新视图

ngrx 4是一个用于管理状态的JavaScript库,它是基于Redux模式的Angular状态管理工具。选择器是ngrx中的一个重要概念,用于从存储中选择和转换数据,以供应用程序使用。

选择器的作用是从存储中获取特定的数据,并将其转换为视图所需的形式。它们可以帮助我们避免在视图组件中直接访问存储,并提供了一种更灵活和可维护的方式来获取和处理数据。

在ngrx 4中,选择器的更新视图问题可能是由以下几个原因引起的:

  1. 选择器的实现问题:请确保选择器的实现正确,并且返回的数据是正确的。可以通过调试和单元测试来验证选择器的正确性。
  2. 存储中的数据没有更新:如果存储中的数据没有更新,选择器将返回相同的结果,导致视图不会更新。在这种情况下,需要确保在更新数据后,存储中的状态也得到了更新。
  3. 视图组件没有正确订阅选择器:确保视图组件正确订阅了选择器,并且在选择器返回的数据发生变化时,能够及时更新视图。
  4. 变更检测策略问题:Angular的变更检测策略可能会导致视图不更新。可以尝试将变更检测策略设置为OnPush,以确保只有在输入属性发生变化时才进行变更检测。

总结起来,要解决ngrx 4选择器不更新视图的问题,需要确保选择器的实现正确,并返回正确的数据;同时,存储中的数据也需要正确更新;视图组件需要正确订阅选择器,并使用正确的变更检测策略。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

    日期时间选择器: 最多可以展示4个独立的滑轮,每一个滑轮表示一个不同的值,比如月份或小时等 在每个滑轮的中央使用深色字体来表示当前选中的值 日期时间选择器的大小与iPhone键盘的大小相同,并且不可更改...页面控件: 包含一系列圆点,圆点的个数代表了当前打开的视图数量(从左到右,这些圆点代表了视图打开的先后顺序) 默认情况下,使用不透明点来标识当前打开的视图,使用半透明点来表示所有其它视图 不支持用户访问连续的视图...当视图数量超过页面宽度可承载的氛围时,点的大小和间距并不会因此变小(如果需要显示的点超过一定数量,系统会把它截断) 默认情况下不支持视图之间导航;你必须实现视图视图之间的导航并适当地更新页面控件状态...如果用户可以在你的应用程序打开超过20个视图,请考虑给视图一个不同的展示方式,以提供关于视图的详细信息,使其支持连续的导航。 在打开视图的底部边缘和屏幕的底部边缘里垂直居中页面控件。...刷新控件: 看起来类似活动指示器 可以出现在标题中 默认状态下不可见,当用户在表格上缘往下拖拽以刷新内容时才出现 使用刷新控件,给用户提供一个一致的方式来了解一个表格或其他视图的内容更新,而不需要等待下一个自动更新

    13.2K30

    一起脱去小程序的外套和内衣:微信小程序架构解析

    返回显示历史View 退出小程序,View状态销毁 4、小程序入口 扫码进入小程序 搜索小程序 小程序发送到桌面(Android) 发送给朋友 二、小程序架构 微信小程序的框架包含两部分View视图层...视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新视图层把触发的事件通知到逻辑层进行业务处理。...WXSS不支持级联选择器。 小程序无法打开页面,无法拉起APP。 小程序不能和公众号重名,于是小程序的名字就成了:自选股+、滴滴出行DiDi 。...View层和逻辑层分离,通过数据驱动,直接操作DOM。 使用Virtual DOM,进行局部更新。 全部使用https,确保传输中安全。 使用离线能力。 前端组件化开发。...持续更新 - 受益于 service worker 的更新进程,应用能够始终保持更新。 安全 - 通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改。

    10.3K64

    一起脱去小程序的外套 - 微信小程序架构解析

    返回显示历史View 退出小程序,View状态销毁 4、小程序入口 扫码进入小程序 搜索小程序 小程序发送到桌面(Android) 发送给朋友 二、小程序架构 微信小程序的框架包含两部分View视图层...视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新视图层把触发的事件通知到逻辑层进行业务处理。...WXSS不支持级联选择器。 小程序无法打开页面,无法拉起APP。 小程序不能和公众号重名,于是小程序的名字就成了:自选股+、滴滴出行DiDi 。...View层和逻辑层分离,通过数据驱动,直接操作DOM。 使用Virtual DOM,进行局部更新。 全部使用https,确保传输中安全。 使用离线能力。 前端组件化开发。...持续更新 - 受益于 service worker 的更新进程,应用能够始终保持更新。 安全 - 通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改。

    1.9K30

    腾讯专家讲座|微信小程序架构解析!

    2.View - WXSS WXSS(WeiXin Style Sheets) 支持大部分CSS特性 添加尺寸单位rpx,可根据屏幕宽度自适应 使用@import语句可以导入外联样式表 不支持多层选择器...-避免被组件内结构破坏 四、小程序逻辑层 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈 1、App( ) 小程序的入口;Page( ) 页面的入口 3、提供丰富的 API,如微信用户数据...4、每个页面有独立的作用域,并提供模块化能力。...2、View层和逻辑层分离,通过数据驱动,直接操作DOM。 3、使用Virtual DOM,进行局部更新4、全部使用https,确保传输中安全。 5、前端组件化开发。...8、WXSS不支持级联选择器。 9、小程序无法打开页面,无法拉起APP。

    1.1K20

    【团队分享】手机QQ:升级iOS8.3后,发图就崩,为哪般?

    4月9号,苹果开始向iOS用户推送最新系统版本iOS8.3的升级。手机QQ团队第一时间进行系统升级的兼容性验证,发现在图片选择器界面切换标清图和原图时必现闪退现象。...于是又搜索了其他场景使用UIAlertView但没有崩溃的代码,对比发现二者的supportedInterfaceOrientations方法有一些差异: 图片选择器视图控制器里面supportedInterfaceOrientations...我们火速进行修复尝试: 将图片选择器界面的视图控制器的supportedInterfaceOrientations方法返回值改为UIInterfaceOrientationMaskPortrait 编译联调验证...崩溃原因总结 如果在视图控制器中重写supportedInterfaceOrientations方法,并将返回值设为UIInterfaceOrientationPortrait的话,那么在此视图控制器或子视图中弹出...在系统版本更新时,要及时关注系统API和常量定义的变化,对功能代码进行兼容性调整。 总结哪来经验,不分享经验何用?

    1.2K40

    Vue 全家桶、原理及优化简议

    为解决多个视图使用同一数据及多个视图驱动同一数据更新的问题,vuex应运而生。...双向绑定图解 一般说的双向绑定,指: 数据变动 --> 视图更新 视图更新 --> 数据变动 视图更新 --> 数据变动,这个方向的绑定比较简单。...在每个setter中,可以做许多事件,使表面看起来数据变了,视图更新了。并且这种数据更新,和原来一样,只是 vm.a=123 这样的简单更新。 ?...,实现数据变动,对应视图更新。...我们只要去遍历所有dom节点包括其子节点: 如果节点属性含有v-model,视图更新函数就为把input的value设置为title的值 如果节点为文本节点,视图更新函数就为先用正则表达式取出大括号里面的值

    2.1K40

    Android Studio 3.6 新特性一览(推荐)

    设计 设计编辑器 设计编辑器(比如布局编辑器和导航编辑器)现在提供了一个拆分视图模式,能够同时查看 UI 界面的 Design 视图和 Code 视图。...拆分视图取代并改进了早期的预览窗口,并且可以对每个文件进行设置,并且可以保存上下文信息,比如:缩放比例和设计视图选项等。想要开启拆分视图,单击编辑器窗口右上角的拆分图标即可。...颜色资源选择器 在这个版本中,通过颜色资源选择器可以快速的在应用程序中选择和替换颜色资源值。在设计工具和 XML 编辑器都可以使用颜色资源选择器。 ?...这些差异意味着布局和代码之间的兼容将导致编译时而不是运行时的构建失败。...在网络连接不可靠的情况下,这个更新对需要下载大的 SDK 组件和工具时非常有帮助,比如 Android 模拟器或系统映像。 ?

    2.4K20

    你必须知道的react redux 陷阱

    它允许您的 React 组件从 Redux 存储中读取数据,并将操作分派到存储以更新状态。 简单来说,就是一个react官方支持的状态管理库。star数超2W,不可谓火。...陈旧props:数据源中明明修改了数据,但是给子组件的props更新 僵尸children:数据源中明明删掉了children对应的项,但是视图上children顽强的活着。...接下来我,详细说一下,他们发生的条件: 陈旧props触发条件: 选择器函数依赖于该组件的 props 来提取数据 作为一个动作的结果,父组件会重新渲染并传递新的道具 但是这个组件的选择器函数在这个组件有机会用这些新道具重新渲染之前执行...选择器函数指的是: A "selector function" is any function that accepts the Redux store state (or part of the...“选择器函数”是接受 Redux 存储状态(或状态的一部分)作为参数并返回基于该状态的数据的任何函数。

    2.5K30

    都9102年了,还需要用到 jQuery 吗?

    操作DOM元素 - jQuery 通过使用选择器引用目标元素并包含应用所需更改的方法,可以更轻松地更改元素的样式和行为。 动画元素 - 动画页面内容是 jQuery 的主要卖点之一。...或者 document.querySelectorAll("selectorName") //gets a group of items DOM 操作 .append() 方法将括号内的内容插入到选择器指定的元素的末尾...@keyframes 是一个用于动画内容的重要工具,用来定义要在舞台上应用的样式以及 animation 属性或其子属性,它被绑定到选择器,指定如何用关键帧样式及其应用的时机。...实现双向数据 状态管理 可以使用专门的库来实现 Context API,Redux 第三方库,如NGRX,NGXS等 Vuex 模板 JavaScript JavaScript(JSX) TypeScript...技能需求率低也表明用更新的库或框架可能会更好,因为有更多的就业机会。 我建议学习 jQuery 以及在项目中用它实现一些基本的功能(技多不压身)。文档能够帮你很快入门。

    2.2K40

    「大众点评点餐」小程序开发经验 02:视图

    文 | 何延希 何延希,美团点评工程师,4 年 web 开发经验,现在是美团点评点餐团队的一员。...视图层将逻辑层的数据(menu.js 和 menu.json)反应为视图,同时将视图层中定义的事件发送给逻辑层。...WXSS 支持选择器。...对于常用的选择器,小程序目前支持以下这些: 目前不支持的选择器有: 此外,还有几个需要注意的地方: 如之前提到,页面的顶层是节点,所以想要修改作用于整个页面的样式、顶层节点样式,请使用 page 选择器...例如:Mustache / tpl(点评内部开发使用),数据更改时,会将 DOM 节点全部更新。 字符串 parse 和 compile 后拼接渲染外,有自己的 DOM 节点更新机制。

    3K30

    最新Web前端面试题精选大全及答案「建议收藏」

    ,返回元素集合 示例:$(“p:empty”) 选取包含子元素或者文本元素的空元素() 3、:has(selector) 描述:选取含有选择器所匹配的元素的元素,返回元素集合...是v和m连接的桥梁,当模型层数据修改时,VM层会检测到,并通知视图层进行相应修改 3.请简述vue的单向数据流 父级prop的更新会向下流动到子组件中,每次父组件发生更新,子组件所有的prop都会刷新为最新的值...destroyed(销毁完成) Vue生命周期的作用 给了用户在不同阶段添加自己的代码的机会 15.DOM渲染在那个生命周期阶段内完成 DOM渲染在mounted周期中就已经完成 Vue路由的实现 前端路由就是更新视图但不请求页面...,视图是可以直接访问模型,所以,视图里面会包含模型信息,mvc关注的是模型不变,所以,在mvc中,模型不依赖视图,但是视图依赖模型 Mvvm 模型 视图 和vm vm是作为模型和视图的桥梁,当模型层数据改变...32.Vue双向绑定的原理 Vue双向绑定就是:数据变化更新视图视图变化更新数据 Vue数据双向绑定是通过数据劫持和观察者模式来实现的, 数据劫持,object.defineproperty它的目的是

    1.5K20

    【Vuejs】365- 初学者可能不知道的 vue.js技巧

    $el //组件 对象的最外层dom元素 5.深度作用选择器 场景一 : scoped的样式,希望影响到子组件的默认样式 在样式中设置完scoped在浏览器解析为如下图这样,a是个... .a /deep/ .b { /* ... */ } 6.Vue数组/对象更新视图更新 场景一 :很多时候我们习惯于这样操作数组和对象...arr: [1,2,3], obj:{ a: 1, b: 2 } }; }, // 数组更新视图更新...this.arr[0] = 'OBKoro1'; this.arr.length = 1; console.log(arr);// ['OBKoro1']; // 数据更新,对象视图更新...$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value) 数组原生方法触发视图更新( vue官网可查): 整体替换数组/对象 7.Vue Filters过滤器的使用 场景一 :常见的数据文本的格式化

    79920

    多种前端框架的优缺点「建议收藏」

    2、强大的选择器:JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及JQuery独创的高级而且复杂的选择器,另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器...6、污染顶级变量:JQuery只建立一个名为JQuery的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权,绝对不会污染其他的对象。...快速:异步批处理方式更新 DOM。 组合:用解耦的、可复用的组件组合你的应用程序。 紧凑:~18kb min+gzip,且无依赖。...速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。 2....4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。 5.

    3.6K20

    最新iOS设计规范五|3大界面要素:控件(Controls)

    当人们点击按钮时,日期选择器将扩展为模式视图,从而提供对熟悉的日历样式编辑器和时间选择器的访问。在模式视图中,人们可以对日期和时间进行多次编辑,然后在视图外部轻按以确认他们的选择。...十、刷新控件(Refresh Content Controls) 手动启动刷新控件会立即重新加载内容(通常在表视图中),而无需等待下一次自动内容更新发生。...刷新控件是活动加载指示器的一种特殊类型,默认情况下处于隐藏状态,并在向下拖动要重新加载的视图时可见。例如,在“邮件”中,您可以将“收件箱”邮件列表向下拖动以检查是否有新邮件。 ? 执行自动内容更新。...不要让用户手动发起每个更新。定期主动更新数据,保持数据的时效性。 有必要时才为刷新提供简短标题。可以为刷新控件加一个标题。...步进器本身展示任何值,因此请确保用户知道,使用步进器时它们正在改变哪个值。 不要使用步进器调整较大数量级的值。调整小数量级的值时,使用步进器是很合适的。

    8.6K30

    腾讯出品小程序自动化测试框架【Minium】系列(三)元素定位详解

    这个框架官方已经维护了。 姑且不说卷卷的问题,要是能卷明白,别说还真不错; 维护又怎样?我想学习,想会,分享给很期待这系列的文章的人罢了。...1、CSS选择器 Minium 可以通过 WXSS 选择器定位元素,如下图所示: image.png 如果有[CSS选择器]基础会上手更快 ,如没有可参考 CSS选择器 XPath 示例: image.png...4、selector方式定位 推荐使用id/class/标签+属性。...示例代码如下: # 适合没有属性元素定位 self.page.get_element("view", inner_text="视图容器").click() self.page.get_element("...小程序发版频繁建议使用绝对定位,使用有一定标识性或属性结合定位,可考虑选择器定位 若元素没有属性,则可考虑XPath,或标签+文本定位 自定义组件定位,可以考虑跨自定义组件的后代选择器或逐层定位元素方法定位

    1.2K10
    领券