Angular删除功能中qId获取undefined的问题排查求助

问题场景 #

编写删除功能移除对象中的Quiz，点击删除按钮触发deleteQuiz函数时，弹出的alert显示qId为undefined，无法获取当前Quiz的ID。

错误原因分析 #

代码存在参数传递不匹配的问题：

• HTML模板中删除按钮传递的是单个属性值 q.qId（即Quiz的ID数值）
• TypeScript代码中deleteQuiz函数却将参数当作完整的Quiz对象，尝试访问其qId属性，导致q.qId必然为undefined

解决方案（二选一即可） #

方案1：修改TypeScript函数，直接接收ID参数 #

调整deleteQuiz函数，让它直接接收ID值并使用：

deleteQuiz(qId: number): void {
    alert(qId);
    // 后续调用删除接口时直接传入qId即可
}

方案2：修改HTML模板，传递完整Quiz对象 #

将删除按钮的点击事件参数改为传递整个Quiz对象：

<button mat-flat-button color="warn" class="ml20" (click)="deleteQuiz(q)">Delete </button>

此时原TypeScript函数的写法无需修改，可正常访问q.qId。

额外验证建议 #

• 查看ngOnInit中console.log(this.quizzes)的输出，确认后端返回的每个Quiz对象确实包含qId字段，避免因后端字段名（如id）与前端接口定义的qId不匹配导致的问题
• 若字段名不匹配，需同步修改Quiz.ts接口的定义及前端代码中的字段引用

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