Angular嵌套数组遍历失败：报toUpperCase未定义错误

嘿，我来帮你揪出这个问题的根源！虽然你自己没直接写toUpperCase方法，但这个错误大概率和Angular的内置管道有关——比如uppercase管道会在内部调用这个方法，而问题出在你的模板遍历逻辑里。

先看你的组件代码，数据结构是没问题的：每个任务对象都有name和to_do数组。结合你给出的模板片段，我推测你是想遍历data数组，再嵌套遍历每个任务的to_do列表，但可能犯了以下某个错误：

常见问题排查点： #

• 属性拼写错误：你在组件里定义的是下划线命名的to_do，但模板里可能写成了驼峰的todo或者其他错误名称，导致访问到undefined。比如如果模板里写了<li *ngFor="let todo of task.todo">，那task.todo就是undefined，后续如果对这个值做了管道处理（比如不小心加了| uppercase），就会触发这个错误。
• 误用uppercase管道：哪怕你没刻意写，也可能不小心给某个可能为undefined的值加了这个管道。比如如果模板里有{{ task.someMissingProperty | uppercase }}，或者输入框绑定了未初始化的变量并加了管道，都会导致这个报错。

给你一个正确的模板示例参考： #

<div class="col-md-12">
  Create New Task: <input type="text" name="task" />
  <ul>
    <!-- 遍历外层任务数组 -->
    <li *ngFor="let task of data">
      {{ task.name }} <!-- 如果要转大写，确保name一定存在：{{ task.name | uppercase }} -->
      <!-- 遍历内层to_do数组，注意属性名是to_do -->
      <ul>
        <li *ngFor="let todoItem of task.to_do">{{ todoItem }}</li>
      </ul>
    </li>
  </ul>
</div>

快速验证方法： #

1. 先移除模板中所有的uppercase管道，看看错误是否消失。如果消失了，就说明是某个管道作用在了undefined值上。
2. 检查所有遍历的属性名，确保和组件里的to_do拼写完全一致。

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