使用 Angular 处理 HTML 模板中的空值

介绍

当您的应用与内部开发的 API 或第三方 API 通信时，您永远无法控制空值或未定义值。因此，当您的数据中确实出现空值或未定义值时，您的应用应该妥善处理它们。您的用户体验不应该显得晦涩难懂。值得庆幸的是，Angular 中有一个开箱即用的 (OOB) 功能来处理空值或未定义数据，称为安全导航运算符。

在本指南中，我们将借助真实场景来了解如何使用安全导航操作符：创建一个小页面，用于呈现任何网站上技术事件的缩略图（例如Pluralsight.com）。

要实施本指南中的步骤，您必须具备以下条件：

节点-12.17.0
Angular CLI——9.0.2
Visual Studio Code - 1.45.1

创建并设置项目

执行以下命令创建一个 Angular 项目。

ng 新安全导航演示

在 Visual Studio Code 中打开生成的应用程序

单击顶部菜单栏中的文件菜单，然后选择菜单选项打开文件夹。
在文件对话框中，导航到生成应用程序的文件夹。
在此文件夹中，您应该看到一个名为safenavigation-demo的文件夹。选择此文件夹并在文件对话框中单击“打开” 。

设置项目

我们将安装Twitter Bootstrap和jQuery并在我们的项目中引用它们，以使用 Bootstrap 样式来改善用户体验。

转到命令提示符并运行以下命令：

cd 安全导航-演示

运行以下命令来安装jquery：

npm 我 jquery

运行以下命令安装Bootstrap：

npm 我 bootstrap

在 Visual Studio Code 中，打开文件angular.json。
在src/style.css之前的样式数组中添加以下行。

“node_modules/bootstrap/dist/css/bootstrap.min.css”，

在脚本数组中添加以下几行：

“node_modules/jquery/dist/jquery.min.js”，“node_modules/bootstrap/dist/js/bootstrap.min.js”

在 Visual Studio Code 中，打开文件src > index.html。
在第 10 行的 body 元素中，添加以下类：

类=“容器”

最终的代码看起来应该是这样的：

      <body class="container">
  <app-root></app-root>
</body>
    

现在项目已全部准备好，可以开发事件页面了。

开发事件页面

在命令提示符中运行以下命令：

ng 生成组件事件缩略图

在 Visual Studio Code 中，打开文件src > app > event-thumbnail > event-thumbnail.component.ts，删除文件内容，然后添加以下代码。此代码定义事件缩略图组件并为其添加一个输入属性。

      import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector:'app-event-thumbnail',
    templateUrl:'./event-thumbnail.component.html',
    styles:[`
        .green { color:#003300 !important; }
        .bold { font-weight:bold; }
        .thumbnail { min-height: 210px; padding-left: 10px; background-color:#343a40; margin-bottom:10px; }
        .pad-left { margin-left: 10px; }
        .well div { color: #bbb; }
        `]
})
export class EventThumbnailComponent
{
    @Input() event:any;
}
    

在 Visual Studio Code 中，打开文件src > app > event-thumbnail > event-thumbnail.component.html，删除文件内容，并添加以下代码。此代码是事件缩略图组件的 HTML 模板。

      <div class="well hoverwell thumbnail">
    <h2>{{event.name | uppercase}}</h2>
    <div>Date: {{event.date | date}}</div>
    <div>Time: {{event.time}}</div>
    <div [ngSwitch]="event.time">
        <span *ngSwitchCase="'8:00 am'">Early Start</span>
        <span *ngSwitchCase="'10:00 am'">Late Start</span>
        <span *ngSwitchDefault>Normal Start</span>
    </div>
    <div>Price: {{event.price | currency}}</div>
    <div>
        <span>Online URL: {{ event.onlineUrl }}</span>
    </div>
</div>
    

在命令提示符中运行以下命令：

ng 生成组件事件列表

在 Visual Studio Code 中，打开文件src > app > events-list > event-list.component.ts，删除文件内容，然后添加以下代码。此代码定义将在事件缩略图组件中呈现的事件列表组件和事件数据。

      import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-events-list',
    templateUrl: './events-list.component.html'
})
export class EventsListComponent implements OnInit
{
    events = [
        {
            name:'Ng-Europe',
            date:'09/10/2020',
            time:'8:00 am',
            price:'200',
            onlineUrl:'https://www.pluralsight.com/angular/ng-europe'
        },
        {
            name:'Angular Fundamentals',
            date:'09/10/2020',
            time:'8:00 am',
            price:'200',
            onlineUrl:'https://www.pluralsight.com/angular/ng-fundamentals'
        },
        {
            name:'Ng-India',
            date:'09/10/2020',
            time:'9:00 am',
            price:'2000',
            onlineUrl:'https://www.pluralsight.com/angular/ng-india'
        },
        {
            name:'Angular - Zero to Hero',
            date:'09/10/2020',
            time:'10:00 am',
            price:'200',
            onlineUrl:'https://www.pluralsight.com/angular/ng-europe'
        }
    ];
    constructor(){
        
    }

    ngOnInit()
    {
        
    }
}
    

在 Visual Studio Code 中，打开文件src > app > events-list > event-list.component.html，删除文件内容，然后添加以下代码。此代码定义事件列表组件的 HTML 模板。

      <div>
    <h1>Upcoming Angular Events</h1>
    <hr />
    <div class="row">
        <div class="col-md-5" *ngFor="let event of events">
            <app-event-thumbnail [event]="event"></app-event-thumbnail>
        </div>
    </div>
</div>
    

在 Visual Studio Code 中，打开文件src > app > app.component.html，删除文件内容，并添加以下代码。此代码将使用 app 组件中的事件列表组件。<app-events-list></app-events-list>

启动开发服务器

在命令提示符中运行以下命令，以监视模式启动 Angular 开发服务器：ng serve
如果提示分享 Angular CLI 使用数据，请按N键表示不分享。
打开浏览器并在地址栏中输入以下 URL 来启动应用程序：https://localhost:4200。您将看到事件页面。
请注意，缩略图可以完美呈现所有数据。

模仿空数据或未定义数据

现在让我们模拟获取空数据或未定义数据的情况。

在 Visual Studio Code 中，打开文件src > app > events-list > event-list.component.html并在第 6 行编辑 event-thumbnail 元素，使其如下所示：

<app-event-thumbnail [事件]=""></app-event-thumbnail>

如果您返回浏览器并查看缩略图，它们将呈现没有任何值的空框。它们看起来不错，但如果您查看开发人员工具栏中的控制台，您会注意到有很多异常。所以让我们使用安全导航运算符来处理这个问题。

处理空数据或未定义数据

在 Visual Studio Code 中，打开文件src > app > event-thumbnail > event-thumbnail.component.html，删除文件内容，然后添加以下代码。请注意，我们已向事件输入属性添加了一个安全导航运算符，以处理它为空或未定义的情况。

      <div class="well hoverwell thumbnail">
    <h2>{{event?.name | uppercase}}</h2>
    <div>Date: {{event?.date | date}}</div>
    <div>Time: {{event?.time}}</div>
    <div [ngSwitch]="event?.time">
        <span *ngSwitchCase="'8:00 am'">Early Start</span>
        <span *ngSwitchCase="'10:00 am'">Late Start</span>
        <span *ngSwitchDefault>Normal Start</span>
    </div>
    <div>Price: {{event?.price | currency}}</div>
    <div>
        <span>Online URL: {{ event?.onlineUrl }}</span>
    </div>
</div>
    

返回浏览器，注意应用程序现在正在渲染带有标签的空框。如果打开开发人员工具栏，您会注意到控制台中没有异常。这是所需的状态。

结论

恭喜！您已使用 Angular 中的安全导航运算符处理了空值或未定义数据。有关更多信息，请参阅Angular 中的安全导航运算符。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文