Angular 10：ngFor循环内点击按钮传项目ID返回undefined问题

这是个很容易踩的大小写坑！你遇到的project.id返回undefined的问题，核心原因就是JavaScript/TypeScript是大小写敏感的语言，而你在模板里写错了属性名的大小写。

先看你的原代码：

<tr *ngFor=" let project of projects; let i = index"> 
  <th scope="row">{{i+1}}</th> 
  <td>{{project.projectName}}</td> 
  <td><button class="btn btn-primary" (click)="deleteProject(project.Id)" >Delete</button></td> 
</tr>

你在点击事件里用的是project.Id（首字母大写的I），但根据你补充的信息，Projects数组里的对象属性是小写的id，这就导致找不到对应的属性，自然返回undefined了。

修复方法 #

只需要把模板里的project.Id改成project.id即可：

<tr *ngFor=" let project of projects; let i = index"> 
  <th scope="row">{{i+1}}</th> 
  <td>{{project.projectName}}</td> 
  <td><button class="btn btn-primary" (click)="deleteProject(project.id)" >Delete</button></td> 
</tr>

额外排查小技巧（下次遇到类似问题可以用） #

• 在模板里临时添加{{ project | json }}，可以直接打印整个project对象的完整结构，快速确认属性的准确名称和大小写
• 在组件的deleteProject方法里先加一行console.log(id)，看看实际接收到的参数是什么，方便定位问题
• 在组件里打印projects数组（比如console.log(this.projects)），确认每个对象确实包含id属性

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