Angular2 中的 *ngFor 循环出错答案

【问题标题】：Error ing *ngFor loop in Angular2Angular2 中的 *ngFor 循环出错
【发布时间】：2017-07-26 07:32:15
【问题描述】：

我想循环渲染一些数据：

  <div *ngFor="let data of parameters.items.tableConfig.nodes">
    <table-item [data]=data></table-item>
  </div>

但是数据

我有错误：

EXCEPTION: Error in ./TableWidgetComponent class TableWidgetComponent - inline template:7:17 caused by: Cannot read property 'nodes' of undefined

如何在数据到来之前等待，然后渲染视图？

*ngIf="parameters && parameters.items.tableConfig.nodes" 对我没有帮助。

【问题讨论】：

parameters.items 属性 tableConfig 未定义
提供更多信息，例如参数模型接口。我们是在异步访问参数吗？

标签： angular typescript angular2-template ngfor

【解决方案1】：

使用这个

<div *ngFor="let data of parameters?.items?.tableConfig?.nodes">
    <table-item [data]=data></table-item>
  </div>

通过使用 elevis 运算符 (?) [也称为 safe navigation operator]，它将防止 angular 引发错误，这在数据像您的情况一样异步传入的情况下很有用

这是有关此的详细信息

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator

【讨论】：

酷。有用。但是你能和我分享这个链接吗？
用@MaxKarpovets 链接检查我的更新

【解决方案2】：

鉴于您说“我如何在数据到来之前等待......”，我认为数据来自异步调用。所以要么是 Observable 要么是 Promise。这里有很多选择；

在实际循环周围添加一个 if 条件。

<div *ngIf="parameters.items.tableConfig">...</div>

使用safe navigation operator (?.) 来防范undefined 和null。

<div *ngFor="let data of parameters.items.tableConfig?.nodes">
   <table-item [data]=data></table-item>
</div>

使用async pipe。

它接受 Promise 或 Observable 并在 Promise 被解析或 Observable 发出新值时使用响应数据更新视图。

export class MyComponent {
   nodePromise: Promise<Node>; // e.g. with Promise.
}

<div *ngFor="let data of nodePromise | async">
   <table-item [data]=data></table-item>
</div>

【讨论】：