Angular中ngFor遍历数组触发Cannot read property 'title' of undefined

你当前模板里的取值逻辑混淆了ngFor遍历的两个变量：

• 代码里*ngFor定义的element，本身就是content数组遍历出来的单个对象元素，是带title、subtitle属性的对象结构，不是可做下标的数组
• 你额外写的element[i]相当于对普通对象做数组下标取值，返回值是undefined，后续对这个undefined取title属性，就直接触发了Cannot read property 'title' of undefined的报错
• 另外[subtitle]的绑定值写了element[i]['subtitle'][i]，既叠加了前面的下标错误，也没有正确把subtitle的数组结构传递给子组件。

按照你定义的数组结构，直接对遍历到的element取对应属性即可，不需要额外套无效下标：

<app-toggle-element 
  *ngFor="let element of content; let i = index" 
  [title]="element.title" 
  [subtitle]="element.subtitle"
></app-toggle-element>

如果你的子组件确实需要拿到当前遍历的索引值做内部逻辑判断，可以单独把i作为输入传给子组件，不需要把下标嵌套在原有属性的取值路径里：

<app-toggle-element 
  *ngFor="let element of content; let i = index" 
  [title]="element.title" 
  [subtitle]="element.subtitle"
  [currentIndex]="i"
></app-toggle-element>

同类常见踩坑点：很多开发者写ngFor时会混淆遍历单元素和原数组的访问路径，比如本来想通过原数组content[i].title取值，错写成了遍历单元素element[i].title，遇到这类属性不存在的报错时，可以先在浏览器控制台打印当前遍历的element实际结构，快速定位取值路径错误。

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