Angular中无法使用*ngFor遍历对象内phones数组问题

嘿，我来帮你搞定这个报错！你遇到的*ngFor遍历联系人电话列表时的错误，十有八九是视图渲染时contact对象或者phones数组还没准备好——毕竟咱Angular的视图是同步渲染的，而你的联系人数据大概率是通过异步请求（比如接口调用）获取的，这时候就容易出现空值引用的问题。

下面是几种靠谱的解决方案，你可以根据自己的场景选：

• 用安全导航操作符（?）防空
  直接在模板里给contact加个问号，确保只有当contact存在时才去访问phones数组：

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

  这样如果contact还没加载完成（是undefined或null），Angular就不会硬去读它的phones属性，自然就不会报错了。

• 用*ngIf先确保contact存在
  要是你不想让空状态下显示空白，也可以用*ngIf把整个列表包裹起来，只有contact加载完成后才渲染列表：

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

  这种方式还能顺便把姓名的渲染也保护起来，一举两得。

• 给contact初始化默认值
  在组件类里给contact对象设置一个初始的空结构，这样即使异步数据还没回来，contact和phones也都是合法的对象/数组：

  // 组件类里的代码
  contact: { name: string; phones: {phone_type: string; phone_number: string}[] } = {
    name: '',
    phones: []
  };
  

  这时候*ngFor遍历空数组也不会报错，等数据回来后自动更新就行。

• 检查异步数据的赋值时机
  如果你的contact是通过接口请求获取的，一定要在订阅的回调函数里赋值，别直接在外面瞎赋值：

  ngOnInit() {
    // 假设你有个contactService负责拿数据
    this.contactService.getContactDetail().subscribe(contactData => {
      this.contact = contactData;
    });
  }
  

  要是你在订阅外直接把contact设成接口返回的Observable，那肯定会报错，因为Observable不是咱们要的实际数据对象。

另外，你提到的错误开头是ContactEditPage.html:61 ERROR T...，通常完整错误信息应该是Cannot read property 'phones' of undefined，本质就是空值引用，上面的方法基本都能解决～

内容的提问来源于stack exchange，提问作者cnak2