Angular TS2339报错：数组类型不存在hobbies等属性如何解决

这个报错和你添加的implements OnInit、ngOnInit代码段没有任何关系，问题出在模板的*ngFor变量引用逻辑上：

• 你写的*ngFor="let item of users"是Angular的循环语法，作用是遍历users这个对象数组，每一轮循环取出的单个用户对象，会赋值给你声明的临时变量item
• 你在循环内部写的users.occupation/users.age/users.hobbies，都是在直接访问整个users数组的属性，而数组类型本身不存在这些属于单个用户对象的字段，TypeScript做静态类型检查时就会抛出TS2339属性不存在的错误
• 模板最外层的<h1>{{users.name}}</h1>也存在同样的问题，直接从数组上取name属性是拿不到有效值的

你组件类里写的users数组定义、OnInit接口实现都是符合要求的，只需要修改模板的变量引用即可：

1. 如果需要遍历展示所有用户的信息，循环内部统一用临时变量item访问单个用户的属性，修正后的模板代码：

<ul *ngFor="let item of users">
  <li>姓名：{{item.name}}</li>
  <li>职业：{{item.occupation}}</li>
  <li>年龄：{{item.age}}</li>
  <li>爱好：{{item.hobbies}}</li>
</ul>

2. 如果只需要展示某一个特定用户的信息（比如数组里的第一个用户），不需要用*ngFor循环，直接通过数组下标取对应元素即可：

<!-- 展示索引为0的第一个用户信息 -->
<h1>{{users[0].name}}</h1>
<p>职业：{{users[0].occupation}}</p>
<p>年龄：{{users[0].age}}</p>
<p>爱好：{{users[0].hobbies}}</p>

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