Angular ng模板中如何访问多层嵌套对象的属性？

test.company.phone可正常访问，是因为phone是company的直接属性；你无法访问test.company.company_name.company_id的核心原因是：test.company.company_name是对象数组，而非单个对象，数组本身不存在company_id属性，直接链式调用自然拿不到值。
另外你贴的对象定义存在语法问题：company_name属性行末尾缺少逗号，会触发TS编译报错，需要补全。

根据使用场景选择对应写法即可：

• 访问指定位置的元素属性：通过数组下标取值，比如取第一个元素的company_id，模板中直接写：

  {{ test.company.company_name[0].company_id }}
  

  上述写法会返回第一个数组元素的company_id值101，需要第二个元素的属性就把下标替换为1。
• 批量渲染所有数组元素的属性：用Angular内置的*ngFor指令遍历数组，示例：

  <ul>
    <li *ngFor="let comp of test.company.company_name">
      公司ID：{{ comp.company_id }}，公司名称：{{ comp.name }}
    </li>
  </ul>
  

• 空值容错写法：如果不确定嵌套路径上的属性是否可能为null或undefined，可以加Angular安全导航操作符?做容错，避免模板渲染抛错：

  {{ test?.company?.company_name?.[0]?.company_id }}
  

public test: Employee = {
  emp_id: 0,
  name: 'test',
  surname: 'test2',
  company: {
    c_id: 12,
    company_name: [{ company_id: 101, name: 'abc' },{ company_id: 101, name: 'abc' }],
    phone: '+665589898',
  },
};

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