Angular报错：无法读取undefined的employeename属性

安全阿岳

2026-8-29

问题原因

报错本质是employee属性未实际初始化。你在组件里写的employee !: Employee只是用TypeScript非空断言骗过了编译阶段的空值检查，运行时这个属性的值还是undefined。模板加载时执行[(ngModel)]双向绑定，要读取employee.employeename，相当于读undefined.employeename，直接触发这个类型错误。

修复方法

1. 初始化employee对象

在组件初始化阶段给employee赋一个带默认值的实例，保证模板渲染时该对象已存在，两种写法选一种就行：

写法1（如果Employee是普通类）：在构造函数里直接new实例

export class AddEmployeeComponent implements OnInit {
  employee: Employee;

  constructor(private employeeService:EmployeeserviceService) {
    this.employee = new Employee();
  }

  // 其余代码不变
  ngOnInit(): void {}

  onSubmit(){
    console.log(this.employee);
    this.employeeService.saveEmployee(this.employee).subscribe(data=>{
      console.log(data);
      // 提交成功后可按需加表单重置、路由跳转逻辑
      this.employee = new Employee();
    })
  }
}

写法2（如果Employee是TS接口interface）：直接赋值对象字面量，字段和绑定项对应即可

export class AddEmployeeComponent implements OnInit {
  employee: Employee = {
    employeename: '',
    age: 0
    // 如果Employee还有其他必填字段，在这里补默认值就行
  };

  // 构造函数、ngOnInit、onSubmit逻辑和上面一致
}

2. 确认依赖配置

检查当前组件所属的模块（通常是AppModule）已经导入FormsModule，否则ngModel双向绑定本身无法工作：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已有导入项
    FormsModule
  ],
  // declarations、providers等其余配置不变
})
export class AppModule { }

验证步骤