在数据从服务返回到页面之前发生 Angular 5 控制台错误，如何防止这种情况发生？

Question

问题：我在 chrome 浏览器 F12 开发工具中看到几个错误

我看到了大约 8 次

  ERROR TypeError: Cannot read property 'CaseDisplayNumber' of undefined

导致此错误的 HTML 模板页面

<span class="header-data">{{caseCaption.CaseDisplayNumber}}</span>

在这些错误下我确实看到了

 this.caseCaption  {CaseDisplayNumber: "CR2017129322000", 

所以这似乎是通话的时间问题？

HTML 代码输出看起来不错...

组件

    ngOnInit(): void {

              this.pageService.getPageCommonData(this.model) //(this.model)
                        .subscribe(
                        result => {
                                   this.caseCaption = result["data"].CaseCaptionInfo;

                       }
            }

服务

getPageCommonData(menu: Menu)  {
        return this.http.post(pageCommonData, JSON.stringify(menu), httpOptions)
        .map((response: Response)=> {

            return response;
        })
}

Answer 1

您可以更改以下代码行：

<span class="header-data">{{caseCaption.CaseDisplayNumber}}</span>

选项 1：

<span class="header-data">{{caseCaption?.CaseDisplayNumber}}</span>

选项 1 使用 ? 称为“二元运算符”或“猫王运算符”；如果该操作数为真，则返回其第一个操作数。在这种情况下，“Elvis Operator”会通知模板需要显示的对象可能尚不可用，并允许模板继续呈现。对象可用时呈现对象及其值。

See this article.

选项 2：

<span *ngIf="caseCaption" class="header-data">{{caseCaption.CaseDisplayNumber}}</span>

来自@Brad 它被称为安全导航运算符。很清楚 在文档中说明 angular.io/guide/template-syntax#expression-operators。