错误类型：无法读取未定义的属性（Reading＆＃x27; losplyEname＆＃x27;）

Question

Add-employee.html

<div class="col-md-6 offset-md-3">
    <h3> Create Employee </h3>
    <form (ngSubmit) = "onSubmit()">

        <div class="form-group">
            <label>Name</label>
            <input type="text" class ="form-control" id = "employeename"
                [(ngModel)] = "employee.employeename" name = "employeename">
        </div>

        <div class="form-group">
            <label>Age</label>
            <input  class ="form-control" id = "age"
                [(ngModel)] = "employee.age" name = "age">
        </div>

        <button class = "btn btn-success" type ="submit">Submit</button>

    </form>
</div> 

Add-employee.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { EmployeeserviceService } from '../employeeservice.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-add-employee',
  templateUrl: './add-employee.component.html',
  styleUrls: ['./add-employee.component.css']
})
export class AddEmployeeComponent implements OnInit {

  employee !: Employee;

  constructor(private employeeService:EmployeeserviceService) { }

  ngOnInit(): void {
  }

  onSubmit(){
    console.log(this.employee);

    this.employeeService.saveEmployee(this.employee).subscribe(data=>{
      console.log(data);
    })
  }

}

我是Angular的新手，我正在尝试为动手体验创建示例员工CRUD应用程序。但是，在创建API创建时，我会得到：

无法阅读Property ophoreeName

我不知道我在哪里做错了，任何人都可以帮助我解决这个问题吗？

提前致谢。

Answer 1

评论中提到的第一个问题，您错过了，在使用它之前，将雇员实例初始化为employee变量。将实例初始化为员工变量将解决问题。

export class AddEmployeeComponent implements OnInit {

  ...

  ngOnInit(): void {
    this.employee = new Employee(0, "", 0);
  }

  ...

}

---

对于隐藏初始化年龄值（0），您可以考虑在雇员类中应用age属性，为无效。

export class Employee {
    id: number;
    employeename: string;
    age: number | null;

    constructor(id: number, employeename: string, age: number | null){
        this.id=id;
        this.employeename=employeename;
        this.age=age;
    }
}

并初始化age为null。

export class AddEmployeeComponent implements OnInit {

 ...

  ngOnInit(): void {
    this.employee = new Employee(0, "", null);
  }

  ...
}