Question

在我的angular2应用程序中，我有一个对象serviceData，该值将在以后从rest / http调用中设置。当我尝试在我的html视图中显示它们时，我收到undefined错误。

我已定义serviceData但未定义serviceData.success，因此serviceData.success未定义。

有没有办法可以避免这个错误，所以serviceData.success一旦可用就会显示出来？这是我的模板：

<li class="list-group-item">{{serviceData.success}}</li>
<li class="list-group-item">{{serviceData.messages}}</li>
<li class="list-group-item">{{serviceData.sessionId}}</li>
<li class="list-group-item">{{serviceData.firstName}}</li>
<li class="list-group-item">{{serviceData.lastName}}</li>

组件

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

//Component code
@Component({
  selector: 'app',
  templateUrl: './app.component.html',

})
export class AppComponent {

  private serviceData: any;

}

Answer 1

是的，只有在*ngIf变量获取某些值后才能使用serviceData指令将元素添加到DOM中，如下所示：

<div *ngIf="serviceData">
    <li class="list-group-item">{{serviceData.success}}</li>
    <li class="list-group-item">{{serviceData.messages}}</li>
    <li class="list-group-item">{{serviceData.sessionId}}</li>
    <li class="list-group-item">{{serviceData.firstName}}</li>
    <li class="list-group-item">{{serviceData.lastName}}</li>
</div>

虽然serviceData为undefined，但此div不会被添加到DOM，只有在serviceData填充了某些值后才会添加。{ / p>

您还可以使用Elvis运算符（?）：

<li class="list-group-item">{{serviceData?.success}}</li>
<li class="list-group-item">{{serviceData?.messages}}</li>
<li class="list-group-item">{{serviceData?.sessionId}}</li>
<li class="list-group-item">{{serviceData?.firstName}}</li>
<li class="list-group-item">{{serviceData?.lastName}}</li>

如何处理angular2

1 个答案: