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

Angular2:使用ngIf指令包装时,ngModel不起作用

Angular2是一种流行的前端开发框架,它提供了一套强大的工具和指令,用于构建现代化的Web应用程序。在Angular2中,ngIf指令用于根据条件动态地添加或移除DOM元素。

当使用ngIf指令包装时,ngModel指令可能会出现不起作用的情况。这是因为ngIf指令会根据条件动态地添加或移除DOM元素,当ngModel指令所在的元素被移除时,ngModel指令也会被销毁,导致其不起作用。

解决这个问题的方法是将ngModel指令放在ngIf指令所在的父元素上,而不是ngIf指令所在的元素上。这样,即使ngIf指令将元素移除,ngModel指令仍然存在于父元素上,可以正常工作。

以下是一个示例代码:

代码语言:html
复制
<div *ngIf="condition">
  <input [(ngModel)]="data">
</div>

在这个示例中,ngModel指令被放置在ngIf指令所在的父元素div上,而不是input元素上。这样,无论ngIf指令是否移除div元素,ngModel指令都能正常工作。

对于Angular2的更多信息和详细介绍,您可以参考腾讯云的Angular2产品文档:Angular2产品介绍

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

相关·内容

ionic3应该善用组件和指令

在angular1代,组件和指令是一回事,即严格来说,没有组件这概念,只有指令,而到了angular2代,虽说组件仍是一种特殊的指令,但已经有一定目的明显区分开来,分别用Directive和Component...Directive——指令 三种分类: 属性指令 属性指令指的是以属性形式使用指令,如ngModel、ngClass、ngStyle等。 结构指令 结构指令,用于修改DOM结构。...其实就是模版指令,如ngIf,当条件为true,该元素会被添加到DOM中。其主要依赖TemplateRef和ViewContainerRef来完成操作。...指令效果.png 5)指令扩展,支持事件操作 我们增加一个点击事件响应操作,点击,循环切换背景色。...自定义结构指令 实例:山寨一个*ngIf的的收缩显示指令,仅为了起到抛砖引玉效果。

3.5K40

Angular 2 架构(下)

保存 双向绑: 使用Angular里的NgModel指令可以更便捷的进行双向绑定。...当 Angular 渲染它们,它会根据指令对 DOM 进行修改。 指令是一个带有"指令元数据"的类。在 TypeScript 中,要通过 @Directive 装饰器把元数据附加到类上。...在Angular中包含以下三种类型的指令: 属性指令:以元素的属性形式来使用指令。 结构指令:用来改变DOM树的结构 组件:作为指令的一个重要子类,组件本质上可以看作是一个带有模板的指令。...*ngIf 表示只有在选择的项存在,才会包含 SiteDetail 组件。...---- 服务(Services) Angular2中的服务是封装了某一特定功能,并且可以通过注入的方式供他人使用的独立模块。 服务分为很多种,包括:值、函数,以及应用所需的特性。

2.2K20

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

4.2、模板驱动表单 通过使用表单的专属指令(例如 ngModel 进行双向数据绑定)将数据值和一些对于用户的行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件的模板中,从而完成与用户的交互...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单中使用 ngModel...之后,NgModel 指令通过更新控件的 css 类,达到反映控件状态的目的 状态 发生的 css 类 没发生的 css 类 控件被访问 ng-touched ng-untouched 控件的值发生变化...在模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20

AngularDart 4.0 高级-结构指令

NgIf指向指令类; ngIf引用指令的属性(attribute)名称。 指令类拼写使用UpperCamelCase(NgIf)。 指令的属性名称拼写使用lowerCamelCase(ngIf)。...API指南描述了额外的NgFor指令属性和上下文属性。 当你编写自己的结构指令,可以使用这些微观语法机制。 研究NgIf和NgFor的源代码是了解更多信息的好方法。...NgSwitchCase和NgSwitchDefault是结构指令使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase的值与switch的值匹配,会显示它的宿主元素。...编写一个结构指令 在本节中,您将编写一个与NgIf相反的UnlessDirective结构指令NgIf在条件为true显示模板内容。...在没有合适的宿主元素使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16K20

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular的基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中的v-model的效果是一致的,只是写法会有一些区别,vue中是可以直接进行使用的...-- [(ngModel)] 是angular的绑定数据的语法 --> <!...NgIf指令是可以控制页面元素的显示与消失,这里和隐藏要区别开,他的效果和css中的display:none效果是一致的,和visibility:hidden是要区别开的,当if判断为false的时候...官方的话:为没有 DOM 元素的指令安排宿主 管道 管道其实就是具有一定功能的函数,主要是一些场景是对字符串什么的进行简单的转化,当然我们也可以自己使用自定义的函数进行数据的转换,只是angular给我们提供了一些初始化的功能函数管道详细列表

2.5K30

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

)]="selectedHero.name" placeholder="name"> 使用ngIf指令隐藏空的对象 当应用程序加载,selectedHero为null。...用包装模板的HTML英雄细节内容。 然后添加ngIf核心指令并将其设置为selectedHero!= null。...当没有选定的英雄ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。 格式化选中hero 当选择的英雄细节显示在列表下方,很难在列表中识别选定的英雄。...您了解了如何在组件模板中使用核心指令ngIf和ngFor。 您在CSS文件中定义了样式,并使用它们来设置应用程序的样式。 你的应用应该看起来像这个实例(查看源代码)。

3K30

Angular 内容投影

答案是可以的,在 Angular 中引入了内容投影的概念,即通过使用 指令来实现内容投影的功能。 ?...接下来我们来看一下,如何利用 指令实现上述的功能。...以上示例我们使用元素选择器,来实现选择性内容投影,最后的运行结果如下: ? 组件投影 ng-content 指令除了支持标准的 HTML 标签外,还支持自定义指令。...将组件的生命周期被绑定到我们的应用程序组件而不是包装器的意义是,开发者可以掌控计数器只被实例化一次,而不用了解第三方库的内部代码。 性能的原因更为重要。...因为 ng-content 只是移动元素,所以可以在编译完成,而不是在运行时,这大大减少了实际应用程序的工作量。

2.5K20

浅谈Angular

ngModel指令 语法: [(ngModel)]='值' ***直接写指令,在angularJS里会报错,需要人为的引入FormsModule模块 3.指令: 结构型指令 1....*ngIf--控制元素的显隐性 ?:ng-show和*ngIf的区别是什么?...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除结构型指令 *ngIf--控制元素的显隐性 ?...来控制元素的显隐 在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器\....可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字 内部还是使用原来的名字 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器 如果要通过指令控制DOM的显隐

4.4K10

Angular系列教程-第四节

等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...它会控制那些带有 ngModel 指令和 name 属性的元素,监听他们的属性。...) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4...当使用 HTML5 的 maxLength 属性,此验证器也会生效。 pattern 此验证器要求控件的值匹配某个正则表达式。当使用 HTML5 的 pattern 属性,它也会生效。...结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令,比如ngfor、ngif 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,比如ngstyle 6.属性型指令 6.1

2.8K50

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

当用户点击英雄的名字,(click)事件绑定调用组件的selectHero方法。 双向数据绑定是一个重要的第四种形式,它使用ngModel指令将属性和事件绑定在一个符号中。...指令 ? Angular模板是动态的。 当Angular呈现它们,它根据指令给出的指示转换DOM。 指令是一个带有@Directive注解的类。...* ngIf仅在选择的英雄存在才包含HeroDetail组件。 在Dart中,唯一值为true的是布尔值true; 所有其他值是错误的。...出于这个原因,这个应用程序的JavaScript和TypeScript版本可以使用selectedHero作为* ngIf表达式的值。 Dart版本必须使用布尔运算符!=替换。...属性指令会改变现有元素的外观或行为。 在模板中,它们看起来像常规的HTML属性,因此也就是名称。 实现双向数据绑定的ngModel指令是一个属性指令的例子。

7.9K30

Angular 显示英雄列表

修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在才显示所选英雄的详情。 把显示英雄详情的 HTML 包裹在一个  中。...并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置为 selectedHero。 不要忘了 ngIf 前面的星号(*),它是该语法中的关键部分。...为什么这样是正常的 当 selectedHero 为 undefined ngIf 从 DOM 中移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。...当用户选择一个英雄,selectedHero 也就有了值,并且 ngIf 把英雄的详情放回到 DOM 中。...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

4.4K70

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

“Component”结尾,例:HeroDetailComponent 组件文件的名称使用Snake Case命名法-单词小写且使用下划线分割以_component结束,例:hero_detail_component.dart...完成后,新模板应该如下所示:lib/src/hero_detail_component.dart (template) template: ''' <div *ngIf="hero !...指令列表 浏览器会忽略不能识别的HTML标签和属性。 Angular也是如此。...就像您为内建的Angular指令所做的那样,通过将其列在元数据指令列表中,告诉Angular关于英雄详细信息组件。...应用程序设计更改 和以前一样,每当用户点击一个英雄名字,英雄详情就会出现在英雄列表的下方。 但是现在HeroDetailComponent正在呈现这些细节。

1.8K10

Angular2 @NgModule

一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。...模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule、HttpModule、RouterModule。...(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中) ---- 3.imports:导入其他...比如导入CommonModule后就可以使用NgIf、NgFor等指令。 ---- 4.exports:用来控制将哪些内部成员暴露给外部使用。...这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。

2.1K40
领券