Angular2 中的 *ngFor 循环错误

Question

我想循环渲染一些数据：

  <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" 对我没有帮助。

Answer 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

Answer 2

鉴于你说 'How I can wait before data come,..'，我认为数据来自异步调用。所以要么是 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>

Angular2 中的 *ngFor 循环错误

Error ing *ngFor loop in Angular2

typescript

angular2-template

ngfor

angular