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

angular中的*ngIf中的AND运算符的计算结果为true,而它不应该为true

在Angular中,ngIf指令用于根据条件来显示或隐藏HTML元素。当ngIf中的AND运算符的计算结果为true时,它会导致条件为true,从而显示元素。如果你认为这个计算结果不应该为true,可能是因为条件表达式中的逻辑有误。

在Angular中,*ngIf中的AND运算符使用的是JavaScript中的逻辑AND运算符(&&)。它用于将两个条件连接起来,只有当两个条件都为true时,整个表达式才会返回true。如果其中一个条件为false,整个表达式就会返回false。

要解决这个问题,你可以检查条件表达式中的逻辑是否正确。确保你使用了正确的变量和运算符,并且条件的逻辑符合你的预期。

以下是一个示例,展示了如何在Angular中使用*ngIf和AND运算符:

代码语言:txt
复制
<div *ngIf="condition1 && condition2">
  <!-- 显示的内容 -->
</div>

在这个示例中,只有当condition1和condition2都为true时,div元素才会被显示出来。

对于这个问题,如果你认为条件表达式中的逻辑是正确的,但计算结果仍然不符合预期,可能是由于其他因素导致的。你可以检查相关的变量和条件是否正确设置和更新,以及是否有其他代码干扰了条件的计算。

关于Angular的*ngIf指令和其他相关知识,你可以参考腾讯云的Angular文档和教程,了解更多信息和示例代码:

请注意,以上提供的链接是腾讯云的相关文档和教程,仅供参考。

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

相关·内容

C#.NET 启动进程时所使用 UseShellExecute 设置 true 和 false 分别代表什么意思?

那你自然也就了解此属性设置 true 和 false 区别了。...不过,此方法有一些值得注意地方: 不支持重定向输入和输出 最终启动了哪个进程可能是不确定,你可能需要注意潜在安全风险 CreateProcess 则会精确查找路径来执行,不支持各种非可执行程序打开...但是: 支持重定向输入和输出 如何选择 UseShellExecute 在 .NET Framework 默认值是 true,在 .NET Core 默认值是 false。...如果有以下需求,那么建议设置此值 false: 需要明确执行一个已知程序 需要重定向输入和输出 如果你有以下需求,那么建议设置此值 true 或者保持默认: 需要打开文档、媒体、网页文件等 需要打开...Url 需要打开脚本执行 需要打开计算机上环境变量中路径程序 ---- 参考资料 c# - When do we need to set UseShellExecute to True?

72320

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

当模板表达式计算结果true时,Angular会添加类。 当表达式false时,它将删除类。 <!...当表达式false时,NgIf从DOM删除HeroDetailComponent,销毁该组件及其所有子组件。 在Dart模式下,Dart期望布尔值(类型booltrue或false。...如果您尝试设置*ngSwitch,则会出现错误,因为NgSwitch是一个属性指令,不是结构指令。 它改变了其同伴指令行为。 它不直接操作DOM。...和null属性路径 Angular安全导航运算符(?.)与Dart条件成员访问运算符一样,是防止属性路径空值便利方法。 在这里,如果currentHero空,则防止视图呈现失败。...在等待数据时候,视图应该没有怨言地呈现,null属性路径应该像title属性一样显示空白。 不幸是,当currentHero空时,应用程序崩溃。 你可以用*ngIf来解决这个问题。 <!

29.9K20

AngularDart 4.0 高级-结构指令 顶

当条件false时,NgIf从DOM删除它宿主元素,将它从DOM事件(它所依附)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...为什么要移除不是隐藏? 指令可以通过将其显示样式设置无隐藏不需要段落。...满足Angular模板类似需求。 编写一个结构指令 在本节,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf在条件true时显示模板内容。...指令属性名称使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular。 选择适合您或您公司简短内容。 在这个例子,前缀是my。...如果条件假并且视图尚未创建,请告诉视图容器从模板创建嵌入视图。 如果条件真并且当前显示视图,则清除且销毁视图容器。 没有人读取myUnless属性,因此它不需要getter。

16K20

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

4.2.2、结构型指令 结构型指令用来操作 dom 树,通过进行一些逻辑判断,从而完成对于页面布局修改 NgIf:根据表达式值(true or false)来创建或者销毁 dom 元素 NgIf 结构型指令 当 expr 属性 true 时,这个元素则会显示在页面上,当属性值 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素...通过在模板表达式中使用管道运算符(|)则可以完成相应结果转换 4.3.1、模板表达式特殊运算符 angular 模板表达式是 javascript 子集,相对于常见 javascript 运算符...安全导航运算符 在视图中使用属性值 null or undefined 时,javascript 和 angular 会引发空指针异常并中断视图渲染过程, 从而视图会渲染失败,而使用了安全导航运算符...非空断言运算符 在 tsconfig.json 启用 strictNullChecks 属性,typescript 将会强制开启严格空值检查,在这种模式下,所有定义了类型属性是不允许赋值 null

15.8K30

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

: true }); } 一般一些js插件,是依托dom。...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...问题三延伸:既然ion-slides已经是封装起来控件了,我们用它不是可以省掉不少代码?...ts把initSwiper方法相关内容移除: import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular...是因为该组件在异步获取到数据this.vm.dessertSlides前已完成了初始化了,这样新数据其实没有应用到,为了处理这种情况,我们改造一下html,ion-slides组件加上一段*ngIf=

1.4K20

Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

:组件逻辑处理 // 导入装饰器:装饰器可以理解一些函数封装,使其书写起来非常简洁明了 import { Component } from '@angular/core';...绑定赋值条件表达式特殊之处: 不支持: 赋值 (=, +=, -=, ...) new运算符 使用;或,链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(...|| , &&) 三目运算符( true ?...true : false ) 直接赋值运算(item = 2); 变量传递 空值保护运算符(?.) item?.a?....index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个,当前不在乎低版本可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点还是有一定性能消耗

6.2K20

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

Angular ,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大特性之一,然而它们却频繁被误解。...在 Angular ,有三种标准结构化指令。...ngIf 跟 if-else 很类似。 当表达式是 false 时候,*ngIf 指令移除 HTML 元素。当 true 时候,元素副本会添加到 DOM 。...当条件值是 true 时候,相关元素就会被渲染到 DOM ,其余元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 元素到 DOM 。...总结 结构指令是 Angular 很重要一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文译文,采用意译形式。

3.8K20

Angular 2.x折腾记 :(2)初步认识angular2,不一样开发模式

:组件逻辑处理 // 导入装饰器:装饰器可以理解一些函数封装,使其书写起来非常简洁明了 import { Component } from '@angular/core'; @Component...'@angular/platform-browser'; // 这也是一个装饰器,用来定义模块和组件相关,比如服务,组件元素,指令,导入导出模块识别 // 每个模块定义必须有这个才能生效...new运算符 使用;或.链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(|| , &&) 三目运算符( true ?...true : false ) 直接赋值运算(item = 2); 变量传递 空值保护运算符(?.) item?.a?....index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个,当前不在乎低版本可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点还是有一定性能消耗

9210

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

一、Overview angular 入坑记录笔记第三篇,介绍 angular 中表单控件相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...响应式表单在表单数据发生变更时,FormControl 实例会返回一个新数据模型,不是直接修改原来数据模型 4.2、模板驱动表单 通过使用表单专属指令(例如 ngModel 进行双向数据绑定)...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单带有 ngModel 指令和 name 属性元素,...使用 FormBuilder 构建控件,每个控件名对应值都是一个数组,第一个值控件默认值,第二项和第三项则是针对这个值设定同步、异步验证方法 import { Component, OnInit...]', // 将指令注册到 NG_VALIDATORS 使用 multi: true 将该验证器添加到现存验证器集合 providers: [{ provide: NG_VALIDATORS

18.9K20

Angular2 之 结构型指令几个概念

组件以前状态被保留着,并随时可以显示。组件不用重新初始化,当然,该操作付出代价比较大! 移除元素组件 利 把ngIf设置false,将会影响到组件资源消耗。...angular会从DOM移除该元素,停止相关组件变更检测,把它从DOM事件移除,并且销毁组件。组件会被垃圾回收,并释放内存。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular会重新创建该组件及其子树。angular会重新运行每个组件初始化逻辑。...要么显示包含在Template标签,要么隐式使用*这种语法糖去包装在Template标签。它简化了ngIf和ngFor —— 无论是写还是读。...-- (A) *ngIf paragraph --> Our heroes are true! <!

3K20

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

这是告诉Angular这个组件构造函数需要HeroService一种方法,这样它就可以获得显示英雄列表。 ? @Component元数据告诉Angular从哪里获取组件指定主要构建块。...在Dart,唯一值true是布尔值true; 所有其他值是错误。 JavaScript和TypeScript相反,将诸如1和大多数非空对象值视为true。...出于这个原因,这个应用程序JavaScript和TypeScript版本可以使用selectedHero作为* ngIf表达式值。 Dart版本必须使用布尔运算符!=替换。...如果您用3000行代码编写“kitchen sink”组件,它不会抱怨。 Angular通过简单地将应用程序逻辑分解服务,并通过依赖注入将这些服务提供给组件,从而帮助您遵循这些原则。 依赖注入 ?...Router:在客户端应用程序从一个页面到另一个页面进行导航,不会离开浏览器 Testing:应用编写组件测试和端到端测试。

7.9K30

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

angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vuev-model效果是一致,只是写法会有一些区别,vue是可以直接进行使用...,但是在angular我们引入框架一个核心模块FormsModule才可以,该指令就是将数据驱动视图改变!...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和cssdisplay:none效果是一致,和visibility...:hidden是要区别开,当if判断false时候,页面上是整个元素都消失了,不是仅仅隐藏了css样式 在需要使用数据绑定组件进行数据处理 import { Component, OnInit...状态 当前isShow:{{isShow}} 我是一个div块 运行效果 true显示:

2.5K30

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

angular提供两种地方存放组件模板 你可以使用 template 属性把它定义内联, 或者把模板定义在一个独立 HTML 文件, 再通过 @Component 装饰器 templateUrl...它是语法不可或缺一部分 通过 NgIf 进行条件显示 有时,应用需要只在特定情况下显示视图或视图一部分,这个时候使用ngif,同vue.js里v-if <p *ngIf="heroes.length...并把它设置组件 isUnchanged 属性的当前值,但你直觉是错!isUnchangedtrue时,button增加disabled属性。...模板绑定是通过 property 和事件来工作不是 attribute. 数据绑定目标是 DOM 某些东西。...) 和空属性路径 Angular 安全导航操作符 (?.) 是一种流畅便利方式,用来保护出现在属性路径 null 和 undefined 值。

15.2K30

ng-content 隐藏内容

如果你尝试在 Angular 编写可重复使用组件,则可能会接触到内容投射概念。然后你发现了 ,并找到了一些关于它文章,进而实现了所需功能。...由于许多问题与Angular 组件生命周期相关,因此我们主要组件将显示一个计数器,用于展示它已被实例化次数: import { Component } from '@angular/core';...> 上述代码成功运行后,counter 组件被正确投影到第二个蓝色框 span 元素最终会在全部红色框。...有时你只需要将其包装在额外容器即可应用 ngIf 或 ngSwitch。无论什么原因,通常情况下,你内部组件不是包装器直接子节点。...在我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令外层容器添加 ngIf 指令: import { Component } from '@angular/core';

2.7K30
领券