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

即使函数返回true,angular 2 ngif也不工作

Angular 2中的ngIf指令用于根据条件动态显示或隐藏HTML元素。当条件为true时,元素将显示,否则将隐藏。

在Angular 2中,ngIf的工作原理是通过检查条件表达式的值来决定是否渲染元素。如果条件表达式的值为true,则元素将被添加到DOM中,否则将从DOM中移除。

无论函数返回true还是false,ngIf都会根据条件表达式的值来决定元素的显示与隐藏。函数返回true只是条件表达式的一种可能情况,但并不是唯一的情况。

以下是ngIf的一些特点和用法:

特点:

  • ngIf是一个结构型指令,它可以应用于任何HTML元素。
  • ngIf可以与其他Angular指令和组件一起使用,以实现更复杂的逻辑。
  • ngIf可以接受一个条件表达式,也可以是一个函数。

用法:

  1. 使用条件表达式:<div *ngIf="condition">显示内容</div>在这个例子中,当条件表达式condition的值为true时,div元素将被渲染并显示在页面上。
  2. 使用函数:<div *ngIf="checkCondition()">显示内容</div>在这个例子中,ngIf将调用checkCondition()函数,并根据函数的返回值来决定元素的显示与隐藏。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云函数计算(Serverless):https://cloud.tencent.com/product/scf 腾讯云函数计算是一种事件驱动的无服务器计算服务,可以帮助开发者更轻松地构建和管理应用程序。
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm 腾讯云云服务器是一种弹性计算服务,提供可调整的计算能力,适用于各种场景,如网站托管、应用程序部署、远程办公等。
  • 腾讯云云数据库MySQL版(CDB):https://cloud.tencent.com/product/cdb_mysql 腾讯云云数据库MySQL版是一种高性能、可扩展的关系型数据库服务,适用于各种应用场景,如Web应用、游戏、物联网等。

请注意,以上链接仅供参考,具体选择产品时需要根据实际需求进行评估和决策。

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

相关·内容

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

验证用户输入的是否满足条件,从而创建出表单模型修改组件中的数据模型,达到获取用户输入数据的功能 模板驱动表单 响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数...在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,而响应式表单在表单数据发生变更时,FormControl 实例会返回一个新的数据模型,而不是直接修改原来的数据模型...FormControl 的构造函数上。...然后,一旦控件数据发生了变化,angular 就会调用这些函数 这里创建针对指定控件的 getter 方法,从而在模板中通过此方法来获取到指定控件的状态信息 import { Component, OnInit...因此这里的验证方法需要在定义控件组时作为 FormGroup 的参数传入 与单个字段的验证方式相似,通过实现 ValidatorFn 接口,当表单数据有效时,它返回一个 null,否则返回 ValidationErrors

18.9K20

Angular核心概念:数据绑定

(达内教育学习笔记)仅供学习交流 Angular数据绑定 Angular核心概念:数据绑定(1)HTML绑定:{{NG表达式}}(2)属性绑定(3)指令绑定(4)事件绑定()(5)双向数据绑定指令...:[(ngModel)]---重点 Angular核心概念:数据绑定 (1)HTML绑定:{{NG表达式}} (2)属性绑定 (3)指令绑定 (4)事件绑定() (5)双向数据绑定指令:[(ngModel...调用函数:Y。创建对象:N。JSON序列化:N。 NG表达式禁止出现new关键字。NG表达式中JSON是undefined。...-- ngIf,else此处只能用NG模板元素ng-template,该容器可以存放其他标签 --> ts文件: isPayingUser = true;//该用户是否为付费用户 //isPayingUser...= false; age = 32; 效果图演示: 特殊的选择绑定 Angular中的指令分三类: 1.组件指令:NG中Component继承自Directive 2.结构型指令:会影响

3.5K10

ng-content 中隐藏的内容

请注意,目标 ng-content 会优先于 catch-all,即使它在模板中的位置靠后。 ngProjectAs 有时你的内部组件会被隐藏在另一个更大的组件中。...页面中会显示一个或两个框,如果我们包含两个框,它们的内容是显示 1 和 1 或 1 和 2?...在我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令的外层容器中添加 ngIf 指令: import { Component } from '@angular/core';...难道这是 ngIf 指令产生的问题,让我们测试一下 ngFor 指令,看看是否有同样的问题: import { Component } from '@angular/core'; @Component...因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序的工作量。

2.7K30

理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

在 Rx--隐藏在Angular 2.x中利剑 一文中我们已经初步的了解了 Rx 和 Rx 在 Angular 的应用。 今天我们一起通过一个具体的例子来理解响应式编程设计的思路。...这个 valueChanges 返回的其实就是一个 Observable ,见下面的 TypeScript 定义: 既然我们得到了这个原始数据流,剩下的工作就比较简单了。...Async 管道 到目前为止,我们还没有进行对 Observable 的订阅,如果订阅的话,写的再漂亮的语句不会执行的。...所幸的是,Angular 提供了对于响应式编程非常友好的设计,我们完全可以不在代码中做订阅或取消订阅的动作。那么问题来了,订阅的话,值怎么获得呢?答案是 Async 管道。...Angular 4 中的 NgIf 的改进 Angular 4 中的 ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能的。

5.2K10

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...list: Array = [{ title: '栗子', id: 0 }, { title: '苹果', id: 1 }, { title: '橘子', id: 2...public isShow: Boolean = true constructor() { } ngOnInit(): void { console.log("ngOnInit==...状态 当前的isShow:{{isShow}} 我是一个div块 运行效果 true显示:...官方的话:为没有 DOM 元素的指令安排宿主 管道 管道其实就是具有一定功能的函数,主要是一些场景是对字符串什么的进行简单的转化,当然我们可以自己使用自定义的函数进行数据的转换,只是angular给我们提供了一些初始化的功能函数管道详细列表

2.5K30

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

用户的更改返回到组件,将属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树的根到所有子组件。 ?...数据绑定对于父组件和子组件之间的通信很重要。 指令 ? Angular模板是动态的。 当Angular呈现它们时,它根据指令给出的指示转换DOM。 指令是一个带有@Directive注解的类。...在Dart中,唯一值为true的是布尔值true; 所有其他值是错误的。 JavaScript和TypeScript相反,将诸如1和大多数非空对象的值视为true。...Angular使用依赖注入来为新组件提供他们需要的服务。 Angular可以通过查看构造函数参数的类型来判断组件需要哪些服务。...如果请求的服务实例不在容器中,那么在将服务返回Angular之前,注入器将创建一个并将其添加到容器中。 当所有请求的服务已经解析并返回时,Angular可以用这些服务作为参数调用组件的构造函数

7.9K30

Angular 显示英雄列表

这种方式让你在其它地方复用该组件更加容易,并且即使全局样式和这里不一样,组件仍然具有期望的外观。...英雄们显示在列表中,并且所点英雄的详情显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置为 selectedHero。 不要忘了 ngIf 前面的星号(*),它是该语法中的关键部分。...src/app/heroes/heroes.component.html (*ngIf)    {{selectedHero.name | uppercase...这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面的底部了。

4.4K70

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

4.2.2、结构型指令 结构型指令用来操作 dom 树,通过进行一些的逻辑判断,从而完成对于页面布局的修改 NgIf:根据表达式的值(true or false)来创建或者销毁 dom 元素 NgIf 结构型指令 当 expr 属性为 true 时,这个元素则会显示在页面上,当属性值为 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素的...,它们接受输入值并返回转换后的值。...五、组件的生命周期钩子函数angular 在创建、更新、销毁组件时都会触发组件的生命周期钩子函数,通过在组件中实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges...html 标签上定义的属性和值 =》DOM 中 Property 和 Attribute 的区别↩ 这里的数据改变指的是会将原来的数据对象重新销毁然后重建的过程,因此像 push、unshift 这样的方法即使添加

15.8K30

Angular 快速学习笔记(1) -- 官方示例要点

条件判断 条件css类 [class.selected]="hero === selectedHero" 组件的输入参数,需要使用 @Input...虽然构造函数可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b. 使用ngOnInit 生命周期钩子中调用服务 RXJS 处理异步操作 a....异步处理可以使用回调函数,可以返回 Promise(承诺),可以返回 Observable(可观察对象) b. angular使用了Rxjs,因此使用Observable,Observable 是...return of(result as T); }; } 在控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好的消息,并给应用返回一个安全值,让它继续工作,可以使用...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

3.6K50
领券