关于angular2 赋值问题

Question

我在做项目的时候发现了一个问题就是我获取到了一个JSON的对象数组，如果我用*ngfor来遍历的话可以把数据都遍历出来，但单个的输出的时候又会出错具体请看下面

首先我把获取到的数据通过*ngfor指令来遍历数据是能够出现的。

代码片段

结果

然后如果我不通过*ngfor指令遍历数据，从JSON的对象数组中单独取出某一个展示到页面上的时候却会发生令我感到惊讶的错误。

代码片段

结果

这个结果真是让我百思不得其解，但是如果我在获取到JSON的对象数组对象之后再单独把里面的对象拿出来然后再展示在页面上又成功显示了。

代码片段

html代码

结果

所以我很奇怪为什么会这样我在angular1的时候
这种写法是可以的但为什么在angular2上会出错呢，而且我并没有在代码上发现问题，所以我就想问一下这究竟是怎么回事？

可能我问的这个问题比较白痴，但还是希望有了解原因的告诉我一声。

Answer 1

我看你说获取到json对象，所以最开始是个空的。
所以初始*ngFor发现是个空不会进行遍历取值、渲染，而模板会直接去取值，取[0]是undefined，再取undefined的name属性所以才会报错。
我觉得是这个原因，你是钻牛角尖了。

Answer 2

你在写TypeScript了，应该养成习惯写interface来描述这个contact_list，而不是简单的给个any类型，这样只要你的interface里面有描述了name属性，模板就不会报错了。在typescript的编程约束下，楼上给的方案用ngIf或者{{contact_list[0]&&contact_list[0].name}}这样写法都是不优雅的。