Angular *ngFor报错Property 'x' does not exist on type 'y[]'

exple本身是由用户对象构成的数组，数组类型上不存在completeAdress属性，TypeScript类型检查会直接拦截这类非法属性访问，抛出Property 'completeAdress' does not exist on type 'y[]'错误，模板无法读取到目标地址数据，自然渲染失败。

根据实际渲染需求二选一即可：

• 如果你要遍历展示所有用户的所有地址，必须做两层嵌套循环：先遍历外层的用户数组exple，再遍历每个用户自身的completeAdress地址数组，参考代码：

<!-- 外层循环遍历用户，ng-container作为循环载体不会生成多余DOM节点 -->
<ng-container *ngFor="let user of exple">
  <div>用户：{{user.firstName}} {{user.lastName}}</div>
  <div *ngFor="let addr of user.completeAdress" style="margin-left: 20px;">
    城市：{{addr.city}}，街区：{{addr.neighborhood}}
  </div>
</ng-container>

• 如果你只需要展示某一个指定用户的地址，先通过数组下标拿到目标用户对象，再访问它的completeAdress属性即可，比如渲染第一个用户的所有地址：

<div *ngFor="let item of exple[0].completeAdress"> {{item.city}} </div>

建议给数据显式声明TypeScript接口，从编译阶段就拦截层级访问错误、属性拼写错误这类问题，避免运行时异常，参考写法：

// 定义嵌套数据的结构类型
interface Address {
  city: string;
  neighborhood: string;
}
interface UserInfo {
  firstName: string;
  lastName: string;
  completeAdress: Address[];
}

// 组件类中给exple标注对应类型
exple: UserInfo[] = [
  // 原有业务数据保持不变即可
  { 
    firstName: 'Msaddak',
    lastName: 'Rouabeh',
    completeAdress: [
      { city: 'Gafsa', neighborhood: 'Cité Hached Lalla' },
      { city: 'Monastir', neighborhood: 'Skanes' }
    ],
  },
  {
    firstName: 'Houssem',
    lastName: 'Ilahi',
    completeAdress: [
      { city: 'Tunis', neighborhood: 'Bardoo' },
      { city: 'Nabeul', neighborhood: 'Mrezka' }
    ],
  }
]

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