Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular4_安全导航操作符 ( ?. ) 和空属性路径大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

安全导航操作符 ( ?. ) 和空属性路径

Angular 的安全导航操作符 (?.)是一种流畅而便利的方式,用来保护出现在属性路径中 null 和 undefined 值。 下例中,当currentHero为空时,保护视图渲染器,让它免于失败。

src/app/app.component.html
The current hero's name is {{CurrentHero?.namE}}

如果下列数据绑定中title属性为空,会发生什么?

src/app/app.component.html
The title is {{title}}

这个视图仍然被渲染出来,但是显示的值是空;只能看到 “The title is”,它后面却没有任何东西。 这是合理的行为。至少应用没有崩溃。

假设模板表达式涉及属性路径,在下例中,显示一个空 (null) 英雄的firstName

The null hero's name is {{nullHero.namE}}

JavaScript 抛出了空引用错误,Angular 也是如此:

TypeError: CAnnot read property 'name' of null in[null].

晕,整个视图都不见了

如果确信hero属性永远不可能为空,可以声称这是合理的行为。 如果它必须不能为空,但它仍然是空值,实际上是制造了一个编程错误,它应该被捕获和修复。 这种情况应该抛出异常。

另一方面,属性路径中的空值可能会时常发生,特别是当我们知道数据最终会出现

当等待数据的时候,视图渲染器不应该抱怨,而应该把这个空属性路径显示为空白,就像上面title属性那样。

不幸的是,当currentHero为空的时候,应用崩溃了。

可以通过用NgIf代码环绕它来解决这个问题。

src/app/app.component.html
<!--No hero,div not displayed,no error --> <div *ngIf="nullHero">The null hero's name is {{nullHero.namE}}</div>

或者可以尝试通过&&来把属性路径的各部分串起来,让它在遇到第一个值的时候,就返回空。

src/app/app.component.html
The hero's name is {{nullHero && nullHero.namE}}

这些方法都有价值,但是会显得笨重,特别是当这个属性路径非常长的时候。 想象一下在一个很长的属性路径(如a.b.c.d)中对空值提供保护。

Angular 安全导航操作符 (?.) 是在属性路径中保护空值的更加流畅、便利的方式。 表达式会在它遇到第一个值的时候跳出。 显示是空的,但应用正常工作,而没有发生错误

src/app/app.component.html
<!-- No hero,no problem! --> The null hero's name is {{nullHero?.namE}}

在像a?.b?.c?.d这样的长属性路径中,它工作得很完美。back to top


非空断言操作符(!

在 TypeScript 2.0 中,我们可以使用--StrictNullchecks标志强制开启严格空值检查。TypeScript就会确保不存在意料之外的null或undefined。

在这种模式下,有类型的变量认是不允许null或undefined值的,如果有未赋值的变量,或者试图把null或undefined赋值给不允许为空的变量,类型检查器就会抛出一个错误

如果类型检查器在运行期间无法确定一个变量是null或undefined,那么它也会抛出一个错误。 我们自己可能知道它不会为空,但类型检查器不知道。 所以我们要告诉类型检查器,它不会为空,这时就要用到非空断言操作符

Angular模板中的**非空断言操作符(!)也是同样的用途。

例如,在用*ngIf来检查过hero是已定义的之后,就可以断言hero属性一定是已定义的。

src/app/app.component.html
:rgb(0,no text -->"hero" The hero's name is {{hero!.namE}}  在 Angular 编译器把你的模板转换成 TypeScript 代码时,这个操作符会防止 TypeScript 报告 "hero.name可能为null或undefined"的错误

安全导航操作符不同的是,非空断言操作符不会防止出现null或undefined。 它只是告诉 TypeScript 的类型检查器对特定的属性表达式,不做 "严格空值检测"。

如果我们打开了严格控制检测,那就要用到这个模板操作符,而其它情况下则是可选的。

大佬总结

以上是大佬教程为你收集整理的Angular4_安全导航操作符 ( ?. ) 和空属性路径全部内容,希望文章能够帮你解决Angular4_安全导航操作符 ( ?. ) 和空属性路径所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。