Angular模板的安全导航( ?. )

查看更多文章: https://alili.tech

这是非常实用,也是在Angular开发中经常要使用的操作符.
而在react于vue中原生并不自带这样的特性.

安全导航操作符 ( ?. )

在我们日常开发中,在访问属性路径的时候.

如果因为一些客观原因导致了路径中出现了 null,undefined,再往下取值,整个程序就会直接报错.导致程序不能往下运行.

举个例子

var obj ={
    a:1,
    b:{  // 有时候,有可能这个属性不存在
        c:2,
        d:3 
    }
}
obj.a //正常取值
obj.b //如果这个属性有时候不存在,这样取值的话,也只是取到一个 undefined,并不会报错
obj.b.c //当b属性不存在的时候,在undefined下取值,就绝对会造成程序崩溃

安全导航就是要解决以上都问题,我们只要在不确定的属性前的 .改成 ?.就可以不需要报错了,当没有取到值的时候,会默认为空.

{{ obj?.b?.c }}

在写模板的时候是不是很方便呢? 简直不能太棒了好伐~

妈妈再也不用担心后台给的数据很奇怪导致我前端报错了~~~~~

---

公众号“ Alili丶前端大爆炸”，关注后提供海量学习资料