Error ing *ngFor loop in Angular2

Question

I want to render some data in loop:

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

But data

And I have error:

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

How I can wait before data come, and then render view?

*ngIf="parameters && parameters.items.tableConfig.nodes" does not helps me.

Provide some more information e.g. interface for parameters model. Are we accessing parameters asynchronously? — Ajay
– Ajay, Commented Mar 6, 2017 at 12:23

Pardeep Jain · Accepted Answer · 2017-03-06 12:46:37Z

2

Use this

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

by using elevis operator (?) [also called safe navigation operator] it will prevent angular to throw error , beneficial in case where data is coming asynchronously like in your case

Here is detailed information about this

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

edited Mar 6, 2017 at 12:46

answered Mar 6, 2017 at 12:19

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maks K Over a year ago

Cool. It works. But can you share with me link with full explanation of this.

Pardeep Jain Over a year ago

check my Update with link @MaxKarpovets

Nico Van Belle · Accepted Answer · 2017-03-06 13:09:44Z

Given you say 'How I can wait before data come,..', I take the data comes from an asynchronous call. So either an Observable or a Promise. You have a number of options here;

Add an if-condition around the actual loop.

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

Use the safe navigation operator (?.) to guard against undefined and null.

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

Use the async pipe.

It accepts a Promise or Observable and updates the view with the response data when the Promise is resolved or when the Observable emits a new value.

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

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

Collectives™ on Stack Overflow

Error ing *ngFor loop in Angular2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related