Angular复选框点击传动态empId 控制台打印this.empId为undefined如何解决

• 形参和组件成员混淆：setAssignment方法中的empId是函数传入的形参，不属于组件实例的属性。你使用this.empId访问的是你在组件类中定义的empId成员变量，你未声明该变量自然输出undefined。
• 参数传递不符合需求：当前模板中给setAssignment传入的是*ngFor的循环索引i，不是员工对象的empId属性，就算你正确打印形参，拿到的也是数组下标而非你需要的员工ID。
• 额外语法问题：原*ngFor语法缺少分隔符，employeeList.sortedList和index as i之间需要加分号，否则部分Angular版本会报错。

1. 修正模板代码，调整参数传递和语法：

<!-- 修正*ngFor语法，传入员工的empId而非索引，建议用change事件替代click更符合复选框交互逻辑 -->
<div *ngFor="let employee of employeeList.sortedList; index as i">
  <!-- 其他代码不变 -->
  <input type="checkbox" checked id="checkbox"  (change)="setAssignment(employee.empId)" />
  <!-- 如果确实需要用到索引，也可以同时传两个参数：(change)="setAssignment(employee.empId, i)" -->
</div>

2. 修正TS代码的打印逻辑，直接访问形参即可，不需要加this：

setAssignment(empId: Number){
  // 直接打印函数入参即可
  console.log(empId)
}

如果你确实需要将empId存为组件的成员变量，先声明再赋值即可：

// 组件类内先声明成员变量
empId?: Number;

setAssignment(empId: Number){
  this.empId = empId;
  console.log(this.empId) // 此时访问this.empId就有值了
}

内容的提问来源于stack exchange，提问作者M D V Ajay kumar 360