无法使用 *ngFor 在对象内显示目标数组

Question

我有一个 Angular 应用程序，其中一个视图显示的是联系人电话号码列表。

我的对象示例：

联系人：{ 名称：“萨姆·史密斯”， 电话：[ {电话类型：'家'，电话号码：'222-222-2222'}， {电话类型：'手机'，电话号码：'333-333-3333'} ] }

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

访问联系人姓名

但是如果我尝试像这样使用 *ngFor 循环电话数组：

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

我明白了：

“ContactEditPage.html:61 ERROR TypeError: Cannot read property 'phones' of undefined”。

所以我知道对象正在被返回，但为什么我不能查看手机数组？

Answer 1

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

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