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

当变量更改时,Angular 6模板不会更新

的原因可能是由于变量的变化没有触发Angular的变更检测机制。Angular的变更检测机制是通过Zone.js库实现的,它会监测应用中的异步操作和事件,并在变更发生时更新模板。

解决这个问题的方法有以下几种:

  1. 使用ChangeDetectionRef手动触发变更检测:在组件中注入ChangeDetectionRef,并调用它的detectChanges()方法来手动触发变更检测。这样可以确保模板能够及时更新。
  2. 使用@Input装饰器:如果变量是通过@Input装饰器从父组件传入的,Angular会自动检测输入属性的变化并更新模板。确保在父组件中正确地传递变量,并在子组件中使用@Input装饰器来声明输入属性。
  3. 使用Observable和异步管道:如果变量是一个Observable对象,可以使用异步管道(async pipe)来自动订阅和更新模板。异步管道会自动处理Observable的变化,并在变化发生时更新模板。
  4. 使用NgZone:NgZone是Angular提供的一个服务,可以在特定的区域内运行代码,并在代码执行完毕后触发变更检测。可以将变量更改的代码放在NgZone.run()方法中,以确保变更检测能够正确触发。

总结起来,当变量更改时,Angular 6模板不会更新可能是由于没有正确触发Angular的变更检测机制。可以通过手动触发变更检测、使用@Input装饰器、使用Observable和异步管道、使用NgZone等方法来解决这个问题。

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

相关·内容

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

模板表达式计算结果为true时,Angular会添加类。 表达式为false时,它将删除类。 <!...双向绑定([(…)]) 您经常希望显示数据属性,并在用户进行更改时更新该属性。 元素另一方面为元素更改事件组合设置特定元素属性和监听。...Dart 2.0注意:检查模式不会在飞镖2.0。 有关更多信息,请参阅Dart 2.0更新。 显示/隐藏不是一回事 您可以使用类或样式绑定来控制元素的可见性: 模板引用变量(#var) 模板引用变量通常是对模板内DOM元素的引用。 它也可以是对Angular组件或指令或Web组件的引用。 使用hash符号(#)来声明一个引用变量。...至少该应用程序不会崩溃。 假设模板表达式涉及一个属性路径,就像在下一个例子中显示一个空的英雄的name一样。

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

    它集成了强大的功能,例如声明性模板,端到端工具,依赖项注入以及各种其他使开发路径流畅的最佳实践。 3.使用Angular有什么优势?...这些表达式用于将应用程序数据绑定到HTML 语法:{{expression}} 6. Angular中的模板是什么? Angular中的模板是使用包含特定于Angular的元素和属性的HTML编写的。...Angular支持创建以下内容的自定义指令: 元素指令 -遇到匹配的元素时,指令将激活。 属性 -遇到匹配的属性时,指令将激活。...在 单向数据绑定中,无论何时更改数据模型,“视图”或“ UI”部分都不会自动更新。您需要手动编写自定义代码,以便在每次视图更改时对其进行更新。...由于所有监视变量都包含在单个循环中,因此任何变量的任何更改/更新都将导致重新分配DOM中存在的其余监视变量

    41.4K51

    AngularDart4.0 指南- 表单 顶

    顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面中的输入和输出属性)来绑定到父组件。 这不是现在的问题,这些未来的变化不会影响表单。...-- TODO: remove the next diagnostic line --> {{spy.className}} 模板引用变量 spy模板引用变量绑定到 DOM元素,而name...有些开发人员希望仅在用户进行无效更改时显示消息。 控件是“原始的”时隐藏消息实现了这个目标。 您向表单添加一个“清除”按钮时,您会看到此选项的重要性。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。...您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。 概要 Angular表单为数据修改,验证等提供支持。

    17.5K30

    AngularDart 4.0 高级-管道 顶

    您使用管道时,Angular会选择简单,更快速的变更检测算法。  不使用管道 在下一个示例中,组件使用默认的积极变化检测策略来监控并更新其hero列表中每个英雄的显示。...它执行管道并用新的列表更新显示,其中包括新的飞行英雄。 如果您更改列表,则不会调用管道,并且不会更新显示; 如果您替换列表,管道将执行并更新显示。...纯净的管道 仅Angular检测到对输入值的纯粹更改时才执行纯管道。 在AngularDart中,纯粹的改变仅仅来自对象引用的改变(假设所有东西都是Dart中的对象)。...Angular忽略(复合)对象内的更改。 如果您更改输入月份,添加到输入列表或更新输入对象属性,它将不会调用纯管道。 这看起来很有限制,但速度也很快。...您可以在实例(查看源代码)中确认,您添加英雄时,即使您变更heroes列表,飞行英雄也会显示更新。 不纯的AsyncPipe Angular AsyncPipe是一个不纯管道的有趣例子。

    6.4K20

    前端三大框架vue,angular,react大杂烩

    var (当然纯属于开玩笑的)    var关键字,是js的变量声明关键字,可以说,它是js得以运行的核心关键字,因为要想一段代码运行,首先得有各种变量和逻辑判断做支撑,而在es6之前,js能声明变量的...,Angular会把批量操作延时到一次更新,性能相对较好。   ...Angular watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。...React-单向数据流    MVVM流的Angular和Vue,都是通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,界面发生变化的时候,按照配置规则去更新相应的数据...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得清晰。

    3K90

    AngularDart4.0 指南- 显示数据 顶

    这些属性改变时,Angular更新显示。 准确地说,重新显示是在与视图相关的某种异步事件之后发生的,例如按键,计时器完成或对HTTP请求的响应。...这里的应用程序使用内联的HTML,因为模板很小,演示简单,没有额外的HTML文件。 在任一种样式中,模板数据绑定都具有对组件属性的相同访问权限。...有关更多信息,请参阅模板语法页面。 注意ngFor指令中的hero变量; 它是模板输入变量的一个例子。 在“模板语法”页面的microsyntax部分阅读有关模板输入变量的更多信息。...Angular为列表中的每个项目复制,将hero变量设置为当前迭代中的项目(英雄)。 Angular使用该变量作为双曲花括号内插的上下文。...组件的英雄列表中有三个以上的项目时,Angular会将该段落添加到DOM,并显示消息。 如果有三个或更少的项目,Angular会忽略该段落,所以不会显示任何消息。

    5.3K10

    前端三大框架vue,angular,react大杂烩

    var (当然纯属于开玩笑的)    var关键字,是js的变量声明关键字,可以说,它是js得以运行的核心关键字,因为要想一段代码运行,首先得有各种变量和逻辑判断做支撑,而在es6之前,js能声明变量的...,Angular会把批量操作延时到一次更新,性能相对较好。   ...Angular watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。...React-单向数据流    MVVM流的Angular和Vue,都是通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,界面发生变化的时候,按照配置规则去更新相应的数据...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得清晰。

    2.1K60

    Angular快速学习笔记(3) -- 组件与模板

    如果你要引用的变量名存在于一个以上的命名空间中,那么,模板变量是最优先的,其次是指令的上下文变量,最后是组件的成员。... 在多数情况下,插值表达式是方便的备选项。 实际上,在渲染视图之前,Angular 把这些插值表达式翻译成相应的属性绑定。...(deleteRequest)="deleteHero($event)" [hero]="currentHero"> 双向绑定 对于需要显示数据属性,并在用户作出更改时更新该属性如何处理呢...'red' : 'green'"> 模板引用变量 ( #var ) 模板引用变量通常用来引用模板中的某个 DOM 元素,它还可以引用 Angular 组件或指令或Web Component。.../app.component.scss'] }) 6.属性指令 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令

    15.3K30

    前端三大框架大杂烩

    var(当然纯属于开玩笑的)   var关键字,是js的变量声明关键字,可以说,它是js得以运行的核心关键字,因为要想一段代码运行,首先得有各种变量和逻辑判断做支撑,而在es6之前,js能声明变量的,就它一个...1.3、脏检测的利弊   和ember.js等技术的getter/setter观测机制相比(优):   getter/setter每次对DOM产生变更,它都要修改DOM树的结构,性能影响大,Angular...Angular watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。...React-单向数据流   MVVM流的Angular和Vue,都是通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,界面发生变化的时候,按照配置规则去更新相应的数据...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue   Vue中指令和组件分得清晰。

    2.6K50

    解读移动端的跨平台开发:TypeScript + Angular

    一个变量的类型改变了之后,很有可能在项目里其它地方也需要改动。它的tsc的compiler可以帮助我们修改,不用手动去改每个地方。...在Google内部,一个工程师改了一行Angular代码的时候有成千上万的单元测试都会被运行。我们希望平台是一个稳定的平台,新出的版本不会破坏以前现有产品的开发。...我们的程序里有很多非同步的一些事件或函数,Zones会直接把它进行复写,复写之后通过对事件和函数的监测,能更有效的提高模板局部更新的速度。...在Angular里面有一个非同步执行的context,它复写了所有非同步的函数和事件,每次结束的时候都需要在每个组件里做一个变化的检测。...要注意的是,它所有的语法和Angular是一样的,所以在渲染的过程中不会有任何问题。

    3.2K80

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

    从数据绑定插值的第一种形式开始,看看有多少丰富的模板HTML可以使用。请回到顶部。 插值({{...}}) 在Angular的早期教程中,你遇到了插值的双曲括号{{and}}。...另外, 将应用和业务逻辑放到到组件本身,在那里它将容易开发和测试。 幂等性 幂等表达式是理想的,因为它没有副作用,并且改善了Angular的变化检测性能。...在以下示例中,将模板$ event对象,模板输入变量(let hero)和模板引用变量(#heroForm)传递给组件的事件处理方法。...Angular可能会或可能不会显示更改的值。Angular可能会检测到更改并发出警告错误。通常来说,保留数据属性和方法返回值就够了。...Dart 2.0注意:检查模式不会出现在飞镖2.0。 有关更多信息,请参阅Dart 2.0更新。 记住括号 括号告诉Angular评估模板表达式。

    5.2K10

    AngularDart4.0 英雄之旅-教程-04明细 顶

    您进行更改时,请通过重新加载浏览器窗口来保持运行。 应用程序重构 在添加新功能之前,您可以从应用程序重构中受益。 应用模板文件 您将对应用程序组件的模板进行多次更新。...表达式部分将hero标识为模板输入变量,其中包含每个迭代的英雄详情。 你可以在模板中引用这个变量来访问当前英雄的属性。...在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量模板语法页的ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...在模板中,将以下绑定添加到标记中: [class.selected]="hero === selectedHero" 表达式(hero === selectedHero)为true时,Angular...表达式为false时,Angular删除选定的类。 ===运算符测试给定的对象是否相同。 在模板语法指南中阅读有关[class]绑定的更多信息。

    3K30

    angular面试题及答案_angular面试

    双向数据绑定的原理 data => view:数据绑定,模板语法 [ ] view => data: 事件绑定,模板语法() angular的双向数据绑定就是 数据绑定 + 事件绑定 ,模板语法 [...在Angular中有三种方法可以做到这一点: Emulated : 样式从其他HTML传播到组件。 Native : 来自其他HTML的样式不会传播到组件。...observable或promise返回data时,我们使用一个临时属性来保存内容。稍后,我们将相同的内容绑定到模板。...1、渲染得更快   2、需要的异步请求更少   3、需要下载的Angular框架体积更小   4、提早检测模板错误   5、安全 JIT优势   编译时间短,除非确实有动态组件的需求,否则...类被初始化之后,构造函数会被调用 ngOnInit ngOnInit 是angular中OnInit钩子的实现,用来初始化组件。

    11.1K120

    web前端开发入门,学习路径以及具体的学习内容

    随着 ES5 发者体会在开发中的难言之隐,ES6 的到来解决了各种头痛的问题。...接下来我们介绍一下目前前端三大框架:AngularAngular 是一个开发平台,他能帮我们轻松的构建 Web 应用,我们将在这部分课程中讲解Angular 的声明式模板,依赖注入,端到端的工具和一些最佳实践于一身...我们通过完整项目配合实例讲解课程,以便于大家容易去理解 Angular 的应用。...为应用程序中的每个状态设计简单的视图,数据更改时,React将高效地更新和正确的渲染组件。声明式视图使您的代码更具可预测性,更易于调试。...另一 方面,与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应 用提供驱动。

    93100

    angular基础面试题_java web面试题

    ngOnDestroy: Angular 每次销毁指令/组件之前调用并清扫....数据双向绑定原理 原理:页面中每绑定一个数据或者事件时,就会向watch队列中加入一条watch,浏览器接受到可以被angular context(当事件触发,调用apply进入angular context...如果此次digest循环有更新,那么会再次触发digest循环,直到所有的watch都没有更新为止。 使用Angular 2,和使用Angular 1相比,有什么优势?...Angular 2是一个平台,不仅是一种语言 更好的速度和性能 简单的依赖注入 模块化,跨平台 具备ES6和Typescript的好处。...灵活的路由,具备延迟加载功能 容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 在Angular 2应用中,我们应该注意哪些安全威胁?

    13K50

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

    组件生命周期挂钩 指令和组件实例的生命周期与Angular创建,更新和摧毁它们一样。...英雄们永远不会知道他们正在被监视。 一边开玩笑,注意两点: Angular为指令和组件调用钩子方法。 间谍指令可以提供对不能直接更改的DOM对象的洞察。 显然,你不能触摸本地div的实现。...OnDestroy 将清理逻辑放入ngOnDestroy中,在Angular销毁指令之前必须运行的逻辑。 这是通知应用程序的另一部分组件将要销毁的时间。 这是释放资源的地方,不会自动收集垃圾。...输入属性的值改变时,Angular只会调用钩子。 hero属性的值是对hero对象的引用。 Angular并不在意英雄自己的name属性发生了变化。...Angular的单向数据流规则禁止在视图组成之后更新视图。 组件视图组合完成后,这两个钩子都会触发。 如果钩子立即更新组件的数据绑定comment属性,Angular会抛出一个错误(尝试它!)。

    6.2K10
    领券