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

使用此

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>

通过使用elevis运算符<div *ngFor="let data of parameters?.items?.tableConfig?.nodes"> <table-item [data]=data></table-item> </div> [也称为(?)]，它将阻止角度抛出错误，这有利于数据像您的情况一样异步传输

以下是有关此内容的详细信息

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

Answer 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>

Angular2

2 个答案: