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

在ngOnInit中更新变量后,Angular 4 ngIf未切换

在Angular 4中,ngOnInit是一个生命周期钩子函数,它在组件初始化时被调用。在ngOnInit中更新变量后,Angular 4的ngIf指令可能不会立即切换。

ngIf指令用于根据条件来添加或移除DOM元素。当条件为true时,ngIf会渲染DOM元素,当条件为false时,ngIf会从DOM中移除该元素。

在ngOnInit中更新变量后,Angular 4的变更检测机制可能需要一些时间来检测变量的变化并更新DOM。因此,即使变量的值已经更新,ngIf可能仍然显示或隐藏DOM元素。

为了确保ngIf能够正确切换,可以使用setTimeout函数将更新变量的代码延迟执行。这样可以确保在变更检测机制运行之后再更新变量,从而使ngIf能够正确切换。

以下是一个示例代码:

代码语言:typescript
复制
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="showElement">This element will be shown or hidden</div>
  `,
})
export class ExampleComponent implements OnInit {
  showElement: boolean = false;

  ngOnInit() {
    setTimeout(() => {
      this.showElement = true;
    }, 0);
  }
}

在上面的示例中,我们将showElement变量初始化为false,并在ngOnInit中使用setTimeout函数将其更新为true。通过将更新代码延迟执行,我们确保了变更检测机制能够正确地检测到变量的变化,并相应地切换ngIf指令。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供了高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器,并根据实际使用情况进行弹性调整。腾讯云云服务器支持多种操作系统和应用场景,适用于网站托管、应用程序部署、数据备份、虚拟桌面等各种场景。

了解更多腾讯云云服务器(CVM)的信息,请访问:腾讯云云服务器(CVM)产品介绍

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

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

使用 ngModel 进行模板绑定时,angular form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单带有 ngModel 指令和 name 属性的元素,而...,从而生成错误信息列表 进行用户输入数据有效性验证时,控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...(): void { } } 当在组件创建好控件实例,通过给视图模板上的表单控件添加 formControl 属性绑定,从而将控件实例与模板的表单控件关联起来 <div class...某些情况下,我们只是想要更新控件组的某个控件的数据值,这时需要使用 patchValue 的方式进行更新 import { Component, OnInit } from '@angular/core...get name() { return this.profileForm.get('name'); } ngOnInit(): void { } } 验证方法,当数据有效时

18.9K20

angular知识点梳理第二篇-基本语法

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular的基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue的v-model的效果是一致的,只是写法会有一些区别,vue是可以直接进行使用的...,但是angular我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变!...app.modules.ts引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据的双向绑定 import.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个boolean类型的变量,用于验证ngif

2.5K30

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

例如,OnInit接口有一个名为ngOnInit的钩子方法,Angular创建组件立即调用: lib/src/peek_a_boo_component.dart (ngOnInit) class PeekABoo...ngOnInit之前调用并且每当有一个或多个数据绑定输入属性发生变化时调用。 ngOnInit Angular首次显示数据绑定属性并设置指令/组件的输入属性,初始化指令/组件。...OnInit 使用ngOnInit有两个主要原因: 施工不久执行复杂的初始化 Angular设置输入属性后设置组件 有经验的开发人员同意组件应该便于构建且安全。...它只调用一次ngOnInit。 您可以期待Angular创建组件立即调用ngOnInit方法。 这就是深度初始化逻辑所属的地方。...Angular的单向数据流规则禁止视图组成之后更新视图。 组件视图组合完成,这两个钩子都会触发。 如果钩子立即更新组件的数据绑定comment属性,Angular会抛出一个错误(尝试它!)。

6.1K10

Angular 从入坑到挖坑 - 组件食用指南

4.1.2、模板绑定语法 angular 应用,组件扮演着控制器或是视图模型的作用,创建组件时会关联一个 html 文件,这个 html 文件则是一个基础的 angular 模板文件 在这个模板文件...模板表达式的变量来源 模板本身的变量 指令的上下文变量 组件的成员信息(属性 or 方法) 使用模板表达式时,如果变量多个来源中都存在的话,则模板变量是最优先的,其次是指令的上下文变量,最后是组件的成员...(): void { } } NgFor 指令上下文中的 index 属性每次迭代,会获取到条数据的索引值 当渲染的数据发生改变时 4,会导致 dom 元素的重新渲染,此时可以采用 trackBy...子组件引入服务,从而同步获取到父组件修改的服务的数据信息 import { Component, OnInit } from '@angular/core'; // 引入服务 import...五、组件的生命周期钩子函数 当 angular 创建、更新、销毁组件时都会触发组件的生命周期钩子函数,通过组件实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges

15.8K30

Angular 结构指令模式 - 它们是什么且怎么使用

Angular ,有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大的特性之一,然而它们却频繁被误解。...你将学到什么 本文中,你将学到关于 Angular 结构指令模式的知识点。你会知道它们是什么并且怎么去使用它们。 学完本文,你将更好理解这些指令并在实际项目中使用它们。... Angular ,有三种标准的结构化指令。...要使用结构指令,我们需要在 HTML 模版添加一个带有指令的元素。然后根据我们指令设置的条件或者表达式添加、删除或者替换元素。 结构指令的例子 我们添加些简单的 HTML 代码。...typescript : Myshopping: string = ''; 我们有一个 MyShopping 变量,它有一个默认值,用于模块渲染满足条件的特定元素。

3.8K20

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

它是语法不可或缺的一部分 通过 NgIf 进行条件显示 有时,应用需要只特定情况下显示视图或视图的一部分,这个时候使用ngif,同vue.js里的v-if <p *ngIf="heroes.length...在这种模式下,有类型的变量默认是不允许 null 或 undefined 值的,如果有赋值的变量,或者试图把 null 或 undefined 赋值给不允许为空的变量,类型检查器就会抛出一个错误 Angular...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。...ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。每个 Angular 变更检测周期中调用,ngOnChanges() 和 ngOnInit() 之后。... Angular 销毁指令/组件之前调用 OnInit钩子 使用 ngOnInit() 有两个原因: 构造函数之后马上执行复杂的初始化逻辑 Angular 设置完输入属性之后,对该组件进行准备

15.2K30

浅谈Angular

ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构移除结构型指令 *ngIf--控制元素的显隐性 ?...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新 解决办法: 使用RxJS解决,RxJS提供响应式开发(基于观察者模式),我们可以订阅某个值...从Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是跨页面, 6.组件间通信: 1.父向子 -- @Input装饰器声明输入属性...,要声明子组件里 2.子向父 -- @Output装饰器声明事件,要声明子组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 事件,当前操作的那个元素就是事件源。

4.4K10

Angular 的生命周期

这是我参与「掘金日新计划 · 4 月更文挑战」的第16天, 接触过 react 和 vue 开发的读者应该对生命周期这个概念不陌生。我们使用 angular 开发的过程,是避免不了的。...组件从开始建立到销毁的过程,会经历过一系列的阶段。这就是一个生命周期,这些阶段对应着应用提供的 lifecycle hooks。 那么, angular ,这些 hooks 都有哪些呢?...angular ,生命周期执行的顺序如下: - constructor 【常用,不算钩子函数,但是很重要】 - ngOnChanges【常用】 - ngOnInit【常用】 - ngDoCheck...简单说,父组件绑定子组件的元素,会触发这个钩子函数,可以多次出发。这在下面的 ngOnInit 总会介绍。 ngOnInit 这个方法调用的时候,说明组件已经初始化成功。... ngAfterViewinit 调用,和在每次 ngAfterContentChecked 之后调用,也就是每次 ngDoCheck 之后调用。

85220

前端三大主流框架的区别(二)

比如遍历直接在jsx中使用map,判断用if等原生js的方法 angular 的指令,比如:*ngIf *ngFor *ngSwitchCase 模板语法 vue 采用双花括号{{}}绑定数据 react...angular 的组件是以.html、css、js三个文件共同来组成的,使用@Component装饰器来组合。组件的创建形式是通过命令构建自动生成基于TypeScript的类生成的组件。...例如:this.currentPage = 1 react 类的构造函数this.state={}或者直接写成类的属性state={},更改状态数据使用:this.setState({comment...: 'Hello'});,该方法为异步更新。...angular 可以和react一样,构造函数定义数组状态,也可以直接定义为累的属性,和构造函数平级,一般放到构造函数上面:todolist: any[] = [];,修改数据的时候和vue类似,

57130

angular面试题及答案_angular面试

ngOninit:初始化指令或组件,angular第一次显示展示组件的绑定属性调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...Constructor 和 ngOnInit 的本质区别 Constructor ES6 constructor表示构造函数,使用在class。来初始化操作。...当类被初始化之后,构造函数会被调用 ngOnInit ngOnInitangularOnInit钩子的实现,用来初始化组件。...是输入属性发生变化的时候调用,并且ngOnInitngOnchanges执行之后才调用,而constructor是组件实例化的时候就调用了,也就是说,constructor是取不到输入属性的值的...使用场景 constructor 不适合进行任何和组件通信类似的复杂操作,一般constructor中进行一些简单的初始化操作,比如依赖注入、变量初始化等。

10.8K120

Angular 6.x 基础教程

答案是项目根目录下的 angular.json 文件,已经默认帮我们配置了默认的前缀,具体如下: "angular6-fundamentals": { "root": "",...第三节 - 事件和模板引用 Angular ,我们可以使用 (eventName) 语法,进行事件绑定。此外,可以使用 #variableName 的语法,定义模板引用。...当在 SimpleFormComponent 组件修改 input 输入框的文本消息,点击更新按钮,将会调用 AppComponent 组件类的 onUpdate() 方法,更新对应的信息。...第十节 - 组件样式 Angular ,我们可以设置组件元数据时通过 styles 或 styleUrls 属性,来设置组件的内联样式和外联样式。... Angular ,对应的指令是 ngClass 。接下来我们来看一下,ngClass 指令的具体应用。

15.6K20
领券