typescript 错误类型错误：无法读取未定义的属性“0” | 角 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46350113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ERROR TypeError: Cannot read property '0' of undefined | Angular 4
提问by Gustavo
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.
当我尝试从从 API 获得的 JSON 中打印数据时出现此错误。它确实打印正确，但是这个错误出现在控制台上，我不知道如何修复它。
HTML
HTML
{{datas[0].dimension}}
TS
TS
datas: Data[];
this.abcService.getDatas().subscribe(datas => {
this.datas = datas;
console.log(datas);
});
JSON got from the API (console.log)
JSON 从 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"
Obs：HTML 确实打印“bla bla bla”
回答by yurzui
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}}
回答by Sajeetharan
Add safe navigation operator to check data is present before accessing since you are getting the response from an asynchronous call
添加安全导航操作符以在访问之前检查数据是否存在，因为您正在从异步调用中获得响应
{{datas[0]?.dimension}}
回答by Aniruddha Das
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.
您收到此错误是因为您的视图中的绑定数据在 angular 编译 html 时为空白，因为 Observable.subscribe 将来会在收到服务响应时为您提供数据。
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
希望能帮助到你
