无法使用* ngFor

Question

我有一个角度应用程序，对于一个视图我显示联系电话号码列表。

我的对象示例：

联络：{     姓名：＆＃39; sam smith＆＃39;，     手机：         {phone_type：＆＃39; home＆＃39;，phone_number：＆＃39; 222-222-2222＆＃39;}，         {phone_type：＆＃39; mobile＆＃39;，phone_number：＆＃39; 333-333-3333＆＃39;}     ] }

在我的html中，我可以使用{{contact.name}}

访问联系人姓名

但是，如果我尝试用* ngFor循环手机数组，就像这样：

<div *ngFor="let phone of contact.phones">{{phone.phone_number}}</div>

我明白了：

＆＃34; ContactEditPage.html：61错误类型错误：无法读取属性＆＃39;手机＆＃39;未定义＆＃34;。

所以我知道该对象正在被退回，但为什么我不能通过手机阵列查看？

Answer 1

您应该使用安全导航操作符来检查值是否存在，因为您的api调用以异步方式返回数据

<div *ngFor="let phone of contact?.phones">{{phone?.phone_number}}</div>