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

Angular 7:组件中更改的对象未在视图中反射

Angular 7是一种流行的前端开发框架,用于构建现代化的Web应用程序。在Angular中,组件是构建用户界面的基本单元。当组件中的对象发生更改时,有时候这些更改可能不会在视图中立即反映出来。这可能是由于Angular的变更检测机制导致的。

Angular使用了一种称为"脏检查"的机制来检测组件中的变化,并在需要时更新视图。但是,有时候Angular可能无法检测到某些更改,导致视图不会更新。这通常是由于以下几个原因引起的:

  1. 变更检测策略:Angular提供了几种变更检测策略,包括默认的ChangeDetectionStrategy.DefaultChangeDetectionStrategy.OnPush。如果组件使用了OnPush策略,并且对象的更改没有触发变更检测,那么视图将不会更新。
  2. 对象引用未更改:Angular使用对象引用来检测变化。如果更改的对象与原始对象具有相同的引用,Angular将无法检测到变化。这可能发生在直接修改对象属性而不是替换整个对象时。

要解决这个问题,可以尝试以下几种方法:

  1. 手动触发变更检测:可以使用ChangeDetectorRef服务手动触发变更检测。在组件中注入ChangeDetectorRef,然后调用detectChanges()方法来强制更新视图。
  2. 使用不可变对象:使用不可变对象可以确保每次更改都会创建一个新的对象引用,从而触发变更检测。可以使用Immutable.jsObject.assign()等方法来创建不可变对象。
  3. 使用NgZone服务:NgZone服务可以将代码运行在Angular的变更检测区域之外,从而避免变更检测的问题。可以在组件中注入NgZone,然后在更改对象时使用run()方法来确保变更检测被触发。

总结起来,当在Angular 7的组件中更改的对象未在视图中反射时,可以尝试手动触发变更检测、使用不可变对象或使用NgZone服务来解决这个问题。

关于Angular 7的更多信息和相关产品,您可以参考腾讯云的Angular开发文档和Angular相关产品:

请注意,以上链接仅供参考,具体的产品和文档可能会有更新和变动。建议您在访问时查阅最新的腾讯云官方文档和产品页面。

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

相关·内容

React 教程:React 快速上手指南

前面我提到了 Babel,这是一个工具,可以帮助我们预览那些尚未在 JavaScript (更确切地说是在浏览器)支持东西,或者以某种方式对 JavaScript 进行扩展(或者类似于 TypeScript...感谢Babel: JSX 将被转化为成浏览器可以理解代码。 我们可以使用尚未在浏览器实现新功能(例如类属性)。 我们可以支持新浏览器特性,同时在旧浏览器中支持较旧功能。...prop 是只读元素,不能直接在子组件更改。很多人有一种不太好习惯,那就是把 prop 复制到 state ,然后再对 state 进行操作。...另外不仅可以给子组件传递字符串这样 prop ,还可以传递数字、对象、函数等。...**SetState **是一种更改本地状态对象方法(通过执行浅层合并),之后组件通过重新渲染自己来响应它。

1.4K30
  • 前端常见面试题--初级版

    2.如何在 React 实现组件之间通信?3.Angular 依赖注入是如何工作?4.你如何使用 jQuery 选择和操作 DOM?...**React组件通信:**父子组件通信可以通过props和回调实现;兄弟组件通信可以通过共同组件作为中介;跨多级组件通信可以使用Redux、Context API或事件总线。...**Angular依赖注入:**Angular依赖注入系统负责创建和管理应用对象及其依赖关系。你可以通过服务(Service)和依赖注入器(Injector)来实现依赖注入。...**优化移动端性能:**减少加载时间、使用触摸友好UI、优化输入延迟、避免不必要加载和重绘等。**口和口单位:**口是用户在屏幕上看到区域。...初始化:使用git init命令在项目目录初始化Git仓库。添加更改:使用git add命令将文件添加到暂存区。提交:使用git commit命令将暂存区更改提交到本地仓库,并添加提交信息。

    8410

    【17】进大厂必须掌握面试题-50个Angular面试

    7. 在Angular,什么是字符串插值? Angular字符串插值是一种特殊语法,它在双花括号 {{}}中使用模板表达式来显示组件数据。它也称为小胡子语法。...在Angular,数据绑定是最强大,最重要功能之一,可让您定义组件与DOM(文档对象模型)之间通信。它从根本上简化了定义交互式应用程序过程,而不必担心在视图或模板与组件之间推送和提取数据。...28.什么是Angular依赖注入? 依赖注入(DI)是一种软件设计模式,其中对象作为依赖关系传递,而不是在组件对其进行硬编码。...ngDoCheck:每当调用给定组件更改检测器时,便会调用它。这使您可以为提供组件实现自己变更检测算法。 ngOnDestroy: 在Angular销毁组件之前立即调用它。...ChangeDetectorRef.prototype.detectChanges():它将在当前组件及其子组件上启动更改检测。 48.在Angular解释ng-app指令。

    41.4K51

    Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

    manualChangeDetection 函数可以用来禁用单元测试自动更改检测,使开发人员可以更精细地控制更改检测。...现在,语言服务将能够像 TypeScript 编译器一样,正确地推断模板泛型类型。例如,在下面的屏幕截图中,我们可以推断出迭代器类型为字符串。...关于 HMR for webpack 信息,请参见: https://webpack.js.org/guides/hot-module-replacement 现在,在开发过程,对组件、模板和样式最新更改将立即更新到正在运行应用程序...请务必检查一下相关内容,确保你使用是最新 API,并遵循我们建议最佳实践。 路线图 我们还更新了路线图,帮助大家了解我们当前优先事项。这篇文章一些公告是路线图中正在进行项目更新。...参考阅读 https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7 ----

    3.3K30

    AngularDart 4.0 高级-生命周期钩子 顶

    OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...AfterContent 演示如何将外部内容投影到组件,以及如何区分组件图中投影内容和子组件。 演示ngAfterContentInit和ngAfterContentChecked挂钩。...一边开玩笑,注意两点: Angular为指令和组件调用钩子方法。 间谍指令可以提供对不能直接更改DOM对象洞察。 显然,你不能触摸本地div实现。 您也不能修改第三方组件。...,该对象将每个已更改属性名称映射到保存当前和前一个属性值SimpleChange对象。...hero属性值是对hero对象引用。 Angular并不在意英雄自己name属性发生了变化。 英雄对象引用没有改变,所以从Angular角度来看,没有改变反馈!

    6.2K10

    Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    @angular/core会创建组件,渲染它,创建并呈现它后代。当@angular/core数据绑定属性更改时,处理就会更改,在从DOM删除其模板之前,就会销毁掉它。...ngOnDestroy:在Angular销毁指令/组件之前清除。取消订阅可观察对象并脱离事件处理程序,以避免内存泄漏。...组件特定hooks: ngAfterContentInit:组件内容已初始化完成 ngAfterContentChecked:在Angular检查投影到其视图中绑定外部内容之后。...在Angular2组件中发生任何改变总是从当前组件传播到其所有子组件。如果一个子组件更改需要反映到其父组件层次结构,我们可以通过使用事件发射器api来发出事件。...这通常用在setter,当类值被更改完成时。 可以通过模块任何一个组件,使用订阅方法来实现事件发射订阅。

    17.3K80

    SceneKit 场景编辑器-为您AR体验构建3D舞台

    它们之间弧度是一次用一个轴旋转对象口控件 口下方是口控件。在这个栏上,我们可以改变到不同视角。我经常将它设置为前面,因为这是在屏幕上添加模型时起始角度。...我们将从头开始构建Apple Watch简单版本。首先,返回飞船场景并删除飞船。我们不再需要它了。我们先添加一些形状。为此,请转到对象库,该对象库是口右上角图标。...转到材质检查器,再次将“ 着色”更改为“ Blinn”并指定漫反射颜色为黑色。 表冠 现在,我们将在侧面增加表冠。转到对象库,选择一个圆柱体并将其放在场景。...在“ 对象库”,选择“ 胶囊体”并将其拖动到场景。 胶囊体大小 在“ 属性”检查器,将“ 帽半径(Cap radius)”更改为0.3,将“ 高度”更改为1.5。...转到“ 材质”检查器,将“ 着色”更改为“ Blinn”,单击“ 漫反射”时,使用颜色选择器从Apple网站中选择图像手镯颜色。

    5.5K20

    34 个今年11月最受欢迎 JavaScript 库

    GitHub Stars: 7.3 k NG Bootstrap 是基于 Angular 开发 Bootstrap CSS 框架指令集,它是专为 Bootstrap 4 开发 Angular 组件...GitHub Stars: 6.7 k AJV是一个基于JSON-Schema依赖包,他可以将我们定义Schema格式作为参数生成一个对象,使用这个对象构造函数可以用于检测数据合法性,除此之外还能够自定义...一个开源JavaScript库, 可以在包括IE8在内传统浏览器中使用,使用许多选项和自定义主题更详细地更改图表。...一些重要WebGLStudio.js功能: 完整3D图形引擎(LiteScene.js),支持多个灯光,阴影贴图,实时反射,自定义材质,postFX,蒙皮,动画等等。...当元素进入口时,将其淡入。可以为每个元素添加自定义偏移量,或在口上设置偏移量(例如,始终在元素达到20%之后触发)。

    2.2K20

    AngularDart 4.0 高级-管道 顶

    在前面的例子,你没有列出DatePipe,因为所有的Angular内置管道都是预先注册。 要在实例查看行为(查看源代码),请更改模板值和可选指数。...更常见情况是,您不知道数据何时发生变化,特别是在以多种方式变异数据应用程序,可能在远离应用程序位置。 这样应用程序组件通常无法了解这些更改。 此外,篡改组件设计以适应管道是不明智。...纯净管道 仅当Angular检测到对输入值纯粹更改时才执行纯管道。 在AngularDart,纯粹改变仅仅来自对象引用改变(假设所有东西都是Dart对象)。...Angular忽略(复合)对象更改。 如果您更改输入月份,添加到输入列表或更新输入对象属性,它将不会调用纯管道。 这看起来很有限制,但速度也很快。...Angular没有等价物。 这不是一个疏忽。 Angular不提供这样管道,因为它们表现不佳,并且避免操控性变弱。 filter和orderBy都需要引用对象属性参数。

    6.4K20

    Angular2 :从 beta 到 release4.0 版本升级总结

    Angular 模块是带有 @NgModule 装饰器函数类。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。...它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器添加服务提供商。 具体请参考官方文档。...组件迁移后,无法正确订阅事件 原因:angular(v4.0.0)依赖注入,若在不同地方声明provider,则会创建不同实例。...7. 在webstorm里,更改文件不能在浏览器更新输出。 原因:webstorm里面默认启用”safe write”,将保存先存到临时文件。...原因:angular(v4.1.1),使用ActivatedRouteAPI获取路由信息。

    8.2K00

    AngularDart4.0 指南 原

    指南 了解Angular基础知识,如本地开发 安装, 显示数据和接受用户输入,构建简单表单, 将应用程序服务注入到组件,以及使用Angular模板语法。...获取依赖关系 在WebStorm: 打开新项目。 在项目视图中,双击pubspec.yaml。...如果您想更改项目的名称,请使用适合您应用程序名称进行项目范围搜索和替换pubspec名称条目(angular_app)的当前值 - 通常它将与 您之前选择目录名称。    ...运行应用程序     在WebStorm:       在项目视图中,右键单击web / index.html。       选择运行'index.html'。      ...6.阅读表单,其中涵盖用户界面数据输入和验证。     7.阅读依赖注入,了解如何从小型单用途零件构建大型,可维护应用程序。

    2.7K20

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,在响应式表单,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件值(获取setvalue...创建 6.2引入 6.3编写 7.自定义指令 directive

    2.8K50

    AngularDart Material Design 弹出框 顶

    即使此组件支持ChangeDetectionStrategy。对于在示例测试案例OnPush,它没有设置ChangeDetectionStrategy。...如果内容发生变化并需要重新调整位置,请使用在PopupInterface也定义trackLayoutChanges。 材质弹出窗口还支持延迟/延迟加载内容。...constrainToViewport bool  设置是否应将弹出窗口限制为口。 如果这是true,那么弹出窗口位置将被限制为始终位于口内而不是移出屏幕外。...与Angular提供程序类似,它支持首选位置嵌套列表。 弹出窗口将展平位置列表并选择第一个适合屏幕位置。 slide String  弹出缩放方向。...visibleChange Stream  弹出窗口visible属性发生更改时触发同步事件(例如,从false变为true或true变为false)。

    2.4K30

    ElementRef & TemplateRef & ViewContainerRef

    ,我们可以通过ElementRef拿到native元素(在浏览器也就是我们常说DOM元素) 下面我们看一段代码 import { Component, ElementRef, AfterViewInit.../src/linker/template_ref.d.ts // 用于表示内嵌template模板,能够用于创建内嵌(EmbeddedViews) export declare abstract...需要注意组件图中 template 模板元素,经过渲染后会被替换成 comment 元素。 ViewContainerRef:用于表示一个视图容器,可添加一个或多个视图。...通过 ViewContainer Ref 实例,我们可以基于 TemplateRef 实例创建内嵌视图,并能指定内嵌视图插入位置,也可以方便对视图容器已有的视图进行管理。...简而言之,ViewContainerRef 主要作用是创建和管理内嵌视图或组件视图。

    1.2K20

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    URL英雄id标识服务器应该更新哪个英雄。 另外,响应数据是单个英雄对象而不是列表。...现在是时候添加创建和删除英雄能力了。 更新英雄细节 尝试在英雄详情视图中编辑英雄名字。 当你输入时,英雄名字在视图标题中被更新。 但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。...当应用程序使用模拟英雄列表时,更新直接应用于单个应用程序范围共享列表英雄对象。 现在,您正在从服务器获取数据,如果您希望更改持续存在,则必须将其写回服务器。...添加删除英雄能力 英雄视图中每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML,位于重复元素英雄名称之后。...如果用户使用鼠标操作粘贴文本,则会触发更改事件绑定。 正如所料,* ngFor从组件英雄属性重复英雄对象。 但正如你很快就会看到,英雄财产现在是一个英雄列表流,而不仅仅是一个英雄名单。

    11K30

    Angular 2 架构(上)

    (Data Binding) 6、指令 (Directives) 7、服务 (Services) 8、依赖注入 (Dependency Injection) 下图展示了每个部分是如何相互工作图中模板...每个 Angular 应该至少要有一个模块(根模块),一般可以命名为:AppModule。 Angular 模块是一个带有 @NgModule 装饰器类,它接收一个用来描述模块属性元数据对象。...组件是构成 Angular 应用基础和核心,可用于整个应用程序组件知道如何渲染自己及配置依赖注入。 组件通过一些由属性和方法组成 API 与视图交互。...创建 Angular 组件方法有三步: 从 @angular/core 引入 Component 修饰器 建立一个普通类,并用 @Component 修饰它 在 @Component ,设置 selector...@Component 装饰器能接受一个配置对象,并把紧随其后类标记成了组件类。 Angular 会基于这些信息创建和展示组件及其视图。

    1.4K10

    模拟试题A

    B)以区每个像素为处理对象,严格按自远到近顺序进行显示 C)从每个多边形出发,根据其对应像素深度大小比较,可按任意顺序进行显示 D)以区每个像素为处理对象,可按任意顺序进行显示 3...9.如图B.1所示,则不完全镜面反射光Is 计算式 ? θ为( ) A)N与H夹角 B)R与N夹角 C)R与V夹角 D)R与H夹角 ?...图B.3 错切变换 二、多项选择题(2′*7=14′) 1.下列二维基本变换类型,能以坐标原点为变换参考对象是( ) A)平移变换 B)旋转变换 C)比例变换 D)错切变换 2.下列有关物体几何表示法叙述语句中...) A)建模变换 B)观察变换 C)投影变换 D)口变换 7.下面各项,属于明暗处理技术有( ) A)Flat平坦方法 B)Gouraud方法 C)Phong方法 D)Lambert方法...设窗口四条边界为 ? ,四条边界为 ? 已知窗口内一点(Xw,Yw),则对应点(Xs,Ys)为Xs= ,Ys= 。 四、综合题(44′) 1.

    3.6K10

    Vue、React 和 Angular:该选择哪个框架?

    从 2018 年 12 月到 2020 年 7 月这段时间,它年下载量大约是 Vue.js 5 倍,是 Angular 13 倍。 各框架年下载量 2....Angular Angular 组件命名为 directive(指令) , 它们是由 Angular 跟踪 DOM 元素上标记。...Vue.js 在 Vue.js ,UI 和行为是组件一部分。该框架也是高度可定制,允许在脚本结合 UI 和组件行为。...这会使更新过程变得非常缓慢,并且在丢失流情况下,将需要花费很长时间才能找出问题所在。值得庆幸是,双向数据绑定过程将模型中所做所有更改都以一种安全高效方式复制到视图中。...Vue.js Vue 也使用虚拟 DOM,因此在项目中更改不会正式对 DOM 产生影响。Vue 在这三者,大小最小(大约 80KB),这大大提高了它性能。

    1.8K20

    前端框架及项目面试-聚焦Vue3、React、Webpack

    Angular是一个由Google开发前端框架,它是一个完整框架,包括了数据绑定、组件化、路由、依赖注入等功能。...Angular采用了TypeScript作为开发语言,它是JavaScript一个超集,提供了静态类型检查和更强大面向对象编程能力。...这意味着模型和视图在实时同步,也就是说,对模型所做任何更改都会立即反映在视图中,反之亦然。无论您项目涉及创建移动应用程序还是Web应用程序,Angular 都是理想之选!...React 目前是一个开源框架,以其虚拟 DOM(文档对象模型)卓越功能而脱颖而出。对于需要一个可靠平台来管理大流量并期望其无缝工作的人来说,这是一个很好框架。...Vue.js 非常灵活,支持您在各种努力。它可以轻松处理简单和动态操作,包括开发在线应用程序、移动应用程序和渐进式 Web 应用程序。

    25410
    领券