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

为什么*ngIf在检查未定义和\或空对象{}的可观察对象时计算为true?

*ngIf在检查未定义和/或空对象{}的可观察对象时计算为true的原因是因为它遵循了JavaScript中的类型转换规则。

在JavaScript中,当对一个值进行逻辑判断时,会发生类型转换。对于对象类型,包括空对象{}和未定义的对象,它们在逻辑判断时会被转换为true。

在Angular中,*ngIf指令用于根据条件来显示或隐藏DOM元素。当条件表达式的结果为true时,元素会被显示,否则会被隐藏。当条件表达式为一个可观察对象时,Angular会自动订阅该对象,并根据对象的值来决定元素的显示与隐藏。

当可观察对象的值为未定义或空对象{}时,根据JavaScript的类型转换规则,它们会被转换为true,因此*ngIf计算为true,元素会被显示出来。

需要注意的是,*ngIf只是根据条件来显示或隐藏元素,并不会对可观察对象进行真正的判断。如果需要对可观察对象进行更精确的判断,可以在组件中使用其他逻辑来处理。

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

相关·内容

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

当模板表达式计算结果true,Angular会添加类。 当表达式false,它将删除类。 <!...当指令没有合适宿主元素如何对元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地从DOM中添加删除元素。...当表达式falseNgIf从DOM中删除HeroDetailComponent,销毁该组件及其所有子组件。 Dart模式下,Dart期望布尔值(类型booltruefalse。...即使在生产模式中,Dart唯一真实true, 所有其它值是false。 另一方面,TypeScriptJavaScript将许多值(包括非对象)视为true。...不幸是,当currentHero,应用程序崩溃。 你可以用*ngIf来解决这个问题。 <!

30K20

理解Angular中*ngIf指令中加问号不加问号区别

Angular开发中,我们经常使用ngIf指令来根据条件动态渲染移除元素。然而,一些情况下,我们可能需要处理一些可能为对象属性。这时,就需要了解ngIf指令中使用加问号不加问号区别。...是一个条件操作符,用于保证访问对象属性避免指针异常。...具体来说,加上问号条件操作符能够保证当pickModeldepotSaleAreaNamenullundefined,*ngIf="pickModel?....综上所述,加上问号条件操作符能够访问对象属性避免指针异常,当对象属性不存在不会报错。这样处理方式对于处理动态数据异步数据非常有用,能够提高代码稳定性可靠性。...总结一下,加问号不加问号Angular中使用*ngIf指令区别主要在于处理对象属性是否表现。我们可以根据具体业务需求来选择合适方式,确保代码可靠性稳定性。

31000
  • 7个处理JavaScript值undefined技巧

    他们有什么明确区别吗?他们似乎都可以定义一个值,而且 当你进行 在做null ===undefined 比较,结果是true。...该标准明确规定,访问未初始化变量,不存在对象属性,不存在数组元素等,您将收到未定义值。...让我们来看看: 变量不会暴露于未初始化状态,因此您没有访问未定义风险 尽可能将变量移动到它们使用地点增加了代码可读性 高度连贯代码块需要更容易重构并提取分离函数 2.2 访问不存在属性...``skipIfQuoted`如果某些属性`config`对象中不可用, 解构赋值将默认值设置:'''''''char','false''skipIfQuoted`。...ES2015Object.assign(target,source1,source2,...)将所有枚举属性值从一个多个源对象复制到目标对象中。该函数返回目标对象

    6K30

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

    它是语法中不可或缺一部分 通过 NgIf 进行条件显示 有时,应用需要只特定情况下显示视图视图一部分,这个时候使用ngif,同vue.js里v-if <p *ngIf="heroes.length...并把它设置组件 isUnchanged 属性的当前值,但你直觉是错!isUnchangedtrue,button增加disabled属性。...name}} 当绑定中 title 属性,仍然会继续渲染 非断言操作符(!) TypeScript 2.0 中,你可以使用 --strictNullChecks 标志强制开启严格检查。...在这种模式下,有类型变量默认是不允许 null undefined 值,如果有未赋值变量,或者试图把 null undefined 赋值给不允许变量,类型检查器就会抛出一个错误 Angular...在这儿反订阅可观察对象分离事件处理器,以防内存泄漏。

    15.3K30

    7个处理JavaScript值undefined技巧

    他们似乎都可以定义一个值,而且 当你进行 在做null ===undefined 比较,结果是true。...该标准明确规定,访问未初始化变量,不存在对象属性,不存在数组元素等,您将收到未定义值。 ...让我们来看看: 变量不会暴露于未初始化状态,因此您没有访问未定义风险 尽可能将变量移动到它们使用地点增加了代码可读性 高度连贯代码块需要更容易重构并提取分离函数 2.2 访问不存在属性...``skipIfQuoted`如果某些属性`config`对象中不可用, 解构赋值将默认值设置:'''''''char','false''skipIfQuoted`。...ES2015Object.assign(target,source1,source2,...)将所有枚举属性值从一个多个源对象复制到目标对象中。该函数返回目标对象

    3.3K31

    37个JavaScript基本面试问题和解答(建议收藏)

    (||)运算符。形式X || Y表达式中,首先计算X并将其解释布尔值。如果此布尔值真,则返回true(1),并且不计算Y,因为“”条件已经满足。...这很好,因为它在逻辑表达式中被视为“真”,但也可以用于您关心返回该值。这解释了为什么,有点令人惊讶是,1 && 2返回2(而你可能会期望它返回true1)。...三重相等运算符===行为与任何传统相等运算符相同:如果两侧两个表达式具有相同类型相同值,则计算结果true。然而,双等号运算符比较它们之前试图强制这些值。...JavaScript引擎将使阵列插槽3至9成插槽”。 b)在这里,a [6]将输出未定义值,但隙仍,而不是未定义某些情况下,这可能是一个重要细微差别。...例如,使用map(),map()输出中插槽将保持,但未定义插槽将使用传递给它函数重映射: var b = [undefined];b[2] = 1;console.log(b); //

    3K10

    TypeScript 中基础类型:原始类型、对象类型、数组类型、元组类型、枚举类型联合类型

    TypeScript 是一种由微软开发静态类型编程语言,它是 JavaScript 超集,并且可以在编译进行类型检查。...TypeScript 强大类型系统使得开发者能够更轻松地编写维护、扩展代码。本文将详细介绍 TypeScript 中基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型联合类型。...例如:let isTrue: boolean = true;未定义类型值类型 (void) 用于表示没有返回值函数。未定义类型 (undefined) 用于表示未赋值变量。...类型推断类型断言TypeScript 具有强大类型推断能力,它可以根据上下文自动推断变量类型。例如,如果我们定义变量直接赋值,TypeScript 可以推断出变量类型。...TypeScript 强大类型系统使得开发者能够在编译进行类型检查,减少了在运行时出现类型错误概率。

    57530

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

    方式来简化完成表单构建 FormBuilder 服务有三个方法:control、group array,用于组件类中分别生成 FormControl、FormGroup FormArray...使用 FormBuilder 构建控件,每个控件名对应值都是一个数组,第一个值控件默认值,第二项第三项则是针对这个值设定同步、异步验证方法 import { Component, OnInit...同模板驱动表单数据有效性验证相同,响应式表单中同样可以使用原生表单验证器,设定规则,需要将模板中控件名对应数据值第二个参数改为验证规则 响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应...,返回 null,当数据无效,则会返回一个对象信息,这里 nameinvalid 就是我们模板中获取到错误信息 key 值 <label...ngOnInit(): void { } } 针对多个字段进行交叉验证模板页面中,则需要通过获取整个表单错误对象信息来获取到交叉验证错误信息 <div class="form-group

    18.9K20

    javaScript七种数据类型大全

    由于instanceof检查整个原型链,因此同一个实例对象,可能会对多个构造函数都返回true。 ? 上面代码中,d同时是DateObject实例,因此对这两个构造函数都返回true。...但还有一种情况,就是并非申明值,java中对未申明值编译时候就会报错,但如果是创建了一个对象就不会报错。如何去区分这两种不同情况呢,况且null还可以转成0,可以回干扰误导计算。...区别是这样:null是一个表示“对象,转为数值0;undefined是一个表示"此处无定义"原始值,转为数值NaN。...例如:当值空串显示,不为空串再判断类型,取对象属性。 ? 上面的代码中,函数add接收一个参数x,如果x是'',那么!...x就会转成 true,就会显示'',如果不是空串,就会继续运行后面的三元运算符。 注意,数组([])对象({})对应布尔值,都是true。 ?

    1.9K40

    处理 JS中 undefined 7 个技巧

    它们似乎都定义了值,而且,比较null == undefined计算结果true。 大多数现代语言,如Ruby、PythonJava都有一个值(nilnull),这似乎是一种合理方式。...对于JavaScript,解释器访问尚未初始化变量对象属性返回undefined。...检查firstlast属性是否是undefined,条件 if(toappendix .first){}if(toappendix .last){}中进行验证: 这种方法有一个缺点, undefined...last' in toAppend)在对应属性存在true,否则为false。...={}解构赋值右侧,确保完全没有指定第二个参数情况下使用对象对象解构是一个强大功能,可以有效地处理从对象中提取属性。 我喜欢在被访问属性不存在指定要返回默认值可能性。

    5.2K20

    php面试题及答案

    > 答案:1 讲解:count(var)是用来统计数组对象元素个数。当var是null或者数组,结果0。如果var是普通变量,则返回1。正常情况下返回var中元素属性个数。...isset()函数时调用此方法 __unset() :当在一个未定义属性上调用unset()函数时调用此方法 __toString() :toString方法将一个对象转化成字符串自动调用,比如使用...当可观察对象更改时,它会将消息发送到已注册观察者。...变量赋值null,返回false empty:判断变量值是否,能转换为false都是返回true,反之返回false。..."",0,"0",NULL,FALSE都认为,返回true 没有任何属性对象都认为是,返回true is_null:检测传入值(值、变量、表达式)是否null 定义了,但是赋值Null,返回

    2.1K40

    js数据类型有哪些?

    特殊类型:underfined 未定义、Null 对象、Infinate 无穷、NAN 非数字 基本数据类型值直接在栈内存中存储,值与值之间独立存在,修改一个变量不会影响到其他变量。...使用typeof检查一个布尔值返回boolean Undefined未定义: js中输出未被赋值被定义变量结果是Undefined;Undefined类型值只有一个。...使用typeof检查时值返回undifined Null对象: Null(值)类型值只有一个,null,用来表示一个对象,使用typeof检查时值返回object,因为null表示对象...,其余都是true 3、nullunderfined,都会转为false 4、对象也会转换为true 其他进制数字: js中,如果需要表示16进制数字,则需要以0x开头 var a =”0x10...number (int+ float) 引用类型:存储栈内存 object ( array {}) array function 函数类型 特殊类型: null (计算一块虚拟内存) 隐式转换

    3.6K30

    来挑战下这 10 个 Python 问题

    在上面的示例中,函数定义期间,Python 允许引用尚未定义函数。但是,执行期间,A 已经是 int 类,这意味着函数方法将返回一个新创建 int 实例,int 实例默认值就是 0。... Python 中,一切都是对象,因此对对象任何实例检查都将返回 True isinstance(Anything, object) #=> True。...同样,all 算法是查找第一个元素,如果没有找到,则返回 True,由于序列中没有假元素,所以 all([]) 返回 True,是不是有点空洞真理概念?...在上述所有情况下,空字符串都被视为序列,因此 sum 将简单地将起始参数作为总结果返回。第一种情况下,它默认为零,对于第二种第三种情况,它意味着列表字典作为开始参数传入。...9、见过负数 0.0 max(-0.0, 0.0) 为什么会这样?出现这种情况是由于两个原因。负零 Python 中被视为相等。max 逻辑是,如果多个最大值,返回遇到第一个。

    49410

    调试试炼开始

    1. bug诞生 bug原意指虫子,有一天小飞蛾意外飞进了正在工作计算机电路里导致了计算机工作发生故障,工作人员对当时计算机进行了细致检查后最终发现了这只被夹扁飞蛾,之后计算机便恢复了正常工作状态...2.1 调试是什么 调试是发现减少计算机程序电子仪器设备中程序错误一个过程。...监视 需要手动输入想知道信息,只有手动删除输入信息才会删除。信息显示是固定,方便观察。 内存 查看程序中各数据在内存中信息。...*pc = 5;//true return 0; } 对于指针变量有两种情况: const*左边,此时const修饰是指针所指向对象,而不是指针本身。...my_strlen(const char *str){ //传入指针可能是指针NULL,此时str就是野指针,没有指向对象,会导致程序出现错误 assert(str !

    43100

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

    ---- 基础概念 国内官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2一堆为什么:...绑定赋值条件表达式特殊之处: 不支持: 赋值 (=, +=, -=, ...) new运算符 使用;,链式表达式 自增自减操作符 (++--) 不支持位运算|& 支持: 逻辑运算(...|| , &&) 三目运算符( true ?...true : false ) 直接赋值运算(item = 2); 变量传递 值保护运算符(?.) item?.a?....,let index = index意思是创建一个局部遍历把当前遍历索引保存到你自定义变量index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个

    6.2K20

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

    angular脏检测机制是基于一定条件时间,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果,所以在此之前调用手动检测方法...问题二:为什么用[hidden],不用*ngIf或者ngSwitch? 因为前者只是隐藏,而后两者是会移除。...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它都需要显式调用一下...是的,大多场景中可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下tshtml文件。...是因为该组件异步获取到数据this.vm.dessertSlides前已完成了初始化了,这样新数据其实没有应用到,为了处理这种情况,我们改造一下html,ion-slides组件加上一段*ngIf=

    1.4K20

    漫谈 C++ 各种检查

    漫谈 C++ 各种检查 1 编译检查 编译静态检查,主要依靠 C++ 语言提供 语法支持/静态断言  编译器扩展 实现 —— 检查失败情况下,编译失败。...1.2 拷贝性检查 C++ 语言本身有很多编译检查(例如 类成员访问控制 (member access control)、const 关键字 在编译成汇编语言后,不能反编译还原),但 C++ 对象默认是拷贝...,访问冲突导致 数据竞争 (data race),可能出现 未定义行为 为此,Chromium 借助: base::ThreadChecker/base::SequenceChecker 检查对象是否只... checker  当前执行环境 线程/序列 DETACH_FROM_THREAD|SEQUENCE 解除 checker  线程/序列 关联 另外,发布版检查实现为 对象,即总能通过检查...问题:若 base::ObserverList 销毁检查 观察者列表是否,可能导致 被观察者销毁后,观察者不能再移除(野指针崩溃) 解决:模板参数 check_empty 若为 true析构断言

    2.5K20

    分享18个用于处理 null、NaN undefined JS 代码片段

    undefined 是程序员使用 JavaScript 遇到常见值。...有效处理这些值对于确保代码稳定性可靠性至关重要。 因此,今天这篇文章中,我们将探讨 18 个 JavaScript 代码片段,它们处理 null、NaN 未定义场景提供了便捷解决方案。...检查变量是否 null undefined: 您可以使用逻辑 OR 运算符组合 null 未定义检查: if (variable === null || typeof variable === '...可选链接: 为了避免访问可能为 null 未定义对象属性出现错误,您可以使用可选链接运算符 (?.): const result = object?.property; 14....合并运算符: 值合并运算符 (??) 提供了一种简洁方法来 null 未定义变量提供默认值: const result = variable ?? defaultValue; 15.

    63150
    领券