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