Angular2对象实例化异步数据答案

【问题标题】：Angular2 Object Instantiation for Asynchronous DataAngular2对象实例化异步数据
【发布时间】：2017-01-15 10:17:04
【问题描述】：

我正在开发一个 angular2 项目，该项目使用新的 Observable 框架从 api 异步获取对象。

  this._accountsService.getAccountDetails(this.id)
    .subscribe(
        AccountDetails => this.accountDetails = AccountDetails,
        err => this.errorMessage = <any>err,
        () => console.log(this.accountDetails)
  );

当我们尝试使用插值 {{AccountDetails.UserName}} 访问该对象的属性时，我们收到了一个属性未定义错误，因为尚未从 api 接收到该对象。我们通过在类中实例化对象来解决这个问题

 accountDetails: AccountDetails = new AccountDetails();

这可行，但是我注意到在 Angular 1 中，如果对象未定义，则会创建一个假对象，这样就永远不会出现未定义的错误——它只会在插值代码中显示一个空值.这是Angular2的变化吗？另外，我注意到当我们在代码中使用 *ngFor 来遍历对象的属性时，如果尚未从 api 接收到对象，它将显示一个空值（而不是触发对象未定义错误）。这是 *ngFor 指令内部发生的事情吗？

【问题讨论】：

标签： angularjs angular angular2-template

【解决方案1】：

使用第一段代码，您需要执行以下操作，

1) 因为它应该是 {{accountDetails.UserName}} （不是 {{AccountDetails.UserName}} ）。注意：请仔细检查 U 或 u，如果不知道对象的属性，我就无法分辨。

2) 你也可以像 {{accountDetails?.UserName}}

一样使用?.

我希望这会有所帮助。

【讨论】：

添加问号适用于任何尚未定义的属性
对不起。我不明白你想说什么。
好的，知道了。是的，它会起作用，而且只是为了这个目的。

【解决方案2】：

Angular 2 基于 Typescript，因此有更严格的类型检查，因此会出现未定义的错误。

为了避免任何错误，您可以做的一件事是使用一个

*ngIf="AccountDetails.UserName"

父标签（*ngFor 循环的父标签）上的条件。这样，只有在从 API 加载信息后才会呈现它。你可以有一些相反条件的加载屏幕

*ngIf = "!AccountDetails.UserName"

所以它会一直显示，直到数据被加载，然后在数据加载后被换出。

你可以删除

accountDetails: AccountDetails = new AccountDetails();

【讨论】：