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

系统管理员 2022-06-04 05:20 171阅读 0赞

**Angular 的安全导航操作符(?.)**是一种流畅而便利的方式，用来保护出现属相路径中null和undefined值。

这种用法基本上和C\#6.0中的委托触发操作符用法相同。

student?.name:当student不为空的时候输出name的值。

**一、空属性路径**

在Angular中 当前模块属性为空时，输出空字符串，不会抛出异常

<div class="alert alert-info">
        <p *ngIf="content">this is {
       {content}}</p>
        <p>测试内容</p>
        <p>this is {
       {content}}</p>
      </div>

import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app';
    }

![Center][]

**二、空对象路径**

在Angular中 对象为空时抛出异常

![Center 1][]

解决方案1：使用 && 逻辑判断符

<p>对象为空:{
       {student&&student.name}}</p>

解决方案2：使用 \*ngIf 判断指令

<p *ngIf="content">this is {
       {content}}</p>

**解决方案3：使用?. 安全导航操作符（推荐）**

<p>对象为空2:{
       {student?.name}}</p>

更多：

[Angular2开发环境搭建之VS Code][Angular2_VS Code]

[Angular CLI简介2][Angular CLI_2]

[Angular CLI简介][Angular CLI]

[Center]: /images/20220604/db29bb86a3f644cbb3e97cd524b9ffbc.png
[Center 1]: /images/20220604/ab2008875a6b4d338f7427f1499247c1.png
[Angular2_VS Code]: http://blog.csdn.net/u011127019/article/details/78680956
[Angular CLI_2]: http://blog.csdn.net/u011127019/article/details/78662242
[Angular CLI]: http://blog.csdn.net/u011127019/article/details/78661287

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 BootStrap路径导航

在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过 CSS 的 `:before` 和 `content` 属性添加了。 ![format_png

╰+哭是因爲堅強的太久メ/ 2023年07月19日 14:30/ 0 赞/ 16 阅读

相关详细的操作符的属性

操作符的属性复杂表达式的求值有三个影响因素。 > 1.操作符的优先级 > 2.操作符的结合性 > 3.是否控制求值顺序。两个相邻的操作符先执行那个？取

ゝ一纸荒年。/ 2022年12月27日 14:20/ 0 赞/ 112 阅读

相关学习kotlin第15天_操作符重载、空安全、异常、注解

继续跟着官方文档学习，再也不说kotlin坑了，感觉坑的是我而不是kotlin。 1、操作符的重载介绍了一些操作符的执行过程以及对应的函数，要是我把文档抄一遍似乎没啥意义。我

﹏ヽ暗。殇╰゛Y/ 2022年06月13日 09:51/ 0 赞/ 169 阅读

相关 Angular管道操作符(|)

一、模板表达式操作符模板表达式语言使用了JavaScript 语法的子集，并补充了几个用于特定场景的特殊操作符：管道操作符、安全导航操作符。二、管道操作符 (|) 在

忘是亡心i/ 2022年06月04日 05:23/ 0 赞/ 263 阅读

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

Angular 的安全导航操作符(?.)是一种流畅而便利的方式，用来保护出现属相路径中null和undefined值。这种用法基本上和C\6.0中的委托触发操作符用法相同。

系统管理员/ 2022年06月04日 05:20/ 0 赞/ 172 阅读

相关 Angular2路由器(路由+导航)

这里给大家简单的总结下Angular2路由器相关的一些信息。但是我一向认为最好的文档还是官方文档，还是推荐大家参考官方文档 [https://www.angula

约定不等于承诺〃/ 2022年05月17日 06:58/ 0 赞/ 322 阅读

相关 angular--安全导航操作符 ( ?. )、非空断言操作符（!）（实用）

原文出处：[https://www.jianshu.com/p/1ccdc6a4d0ce][https_www.jianshu.com_p_1ccdc6a4d0ce] 安全导

太过爱你忘了你带给我的痛/ 2022年05月10日 05:48/ 0 赞/ 215 阅读

相关导航属性

导航属性具体实例 [http://www.mamicode.com/info-detail-2310795.html][http_www.mamicode.com_info-d

- 日理万妓/ 2021年11月02日 04:44/ 0 赞/ 323 阅读

相关 Angular--HTML属性绑定和DOM属性绑定

前言上一篇博客介绍了数据绑定，意犹未尽，所以这片博客再介绍一下HTML属性绑定和DOM绑定。内容 ![这里写图片描述][70] ![这里写图片描述][70

- 日理万妓/ 2021年09月27日 08:24/ 0 赞/ 452 阅读

相关 Angular--Angular Route导航

前言内容路由的基础知识路由重定向子路由辅助路由路由守卫总结

客官°小女子只卖身不卖艺/ 2021年09月27日 08:02/ 0 赞/ 394 阅读