ERROR TypeError: Cannot read property '0' of undefined | Angular 4

I'm getting this error when I try to print a data from the JSON I get from the API. It does print correctly however this error appears on the console and I'm not sure how to fix it.

HTML

{{datas[0].dimension}} 

TS

datas: Data[]; this.abcService.getDatas().subscribe(datas => { this.datas = datas; console.log(datas); }); 

JSON got from the API (console.log)

(1) [{…}] 0: dimension:"bla bla bla" __proto__:Object length:1 

Full error on console

ERROR TypeError: Cannot read property '0' of undefined at Object.eval [as updateRenderer] (GraphicsComponent.html:11) at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13113) at checkAndUpdateView (core.es5.js:12260) at callViewAction (core.es5.js:12620) at execComponentViewsAction (core.es5.js:12552) at checkAndUpdateView (core.es5.js:12261) at callViewAction (core.es5.js:12620) at execEmbeddedViewsAction (core.es5.js:12578) at checkAndUpdateView (core.es5.js:12256) at callViewAction (core.es5.js:12620) DebugContext_ {view: {…}, nodeIndex: 17, nodeDef: {…}, elDef: {…}, elView: {…}} component: (...) componentRenderElement:(...) context:(...) elDef:{index: 16, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, …} elOrCompView:(...) elView:{def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: GraphicsComponent, …} injector:(...) nodeDef:{index: 17, parent: {…}, renderParent: {…}, bindingIndex: 0, outputIndex: 0, …} nodeIndex:17 providerTokens:(...) references:(...) renderNode:(...) view:{def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: GraphicsComponent, …} __proto__:Object 

Obs: HTML does print "bla bla bla"

3 Answers

It should be

{{datas && datas[0]?.dimension}} 

For more details see this thread

Another solution is initialize property with empty array:

datas: Data[] = []; 

and then just write

{{datas[0]?.dimension}} 

Add safe navigation operator to check data is present before accessing since you are getting the response from an asynchronous call

{{datas[0]?.dimension}} 

You are getting this error because your binding data in your view is blank while angular compile html because Observable.subscribe gives you data in the future when serve response received.

So you can initialize it to avoid error or undefined test first and then use it.

{{datas[0]?.dimension}} //will work file 

Hope it helps