Angular 9应用程序返回数据，但Chrome控制台显示以下错误

错误类型错误：无法读取未定义的属性“fName”

数据显示正确，但错误仍显示在Chrome浏览器控制台中。我试过Elvis运算符，但结果相同

控制器代码

ngOnInit(): void {
this.api.getEmploye().subscribe((data: Employee) => {
console.log(data);
this.employee = data;
});


HTML Code

<div class="form-group">
<label for="fName">First Name</label>
<input
type="text"
class="form-control"
id="fName"
required
[(ngModel)]="employee.fName"
name="fName"
/>
</div>
<div class="form-group">
<label for="lName">Last Name</label>
<input
type="text"
class="form-control"
id="lName"
[(ngModel)]="employee.lName"
/>
</div>

ngOnInit（）：void{
this.api.getEmploye（）.subscribe（（数据：Employee）=>{
控制台日志（数据）；
此参数为：employee=数据；
});
HTML代码
名字
姓

之所以出现这种情况，是因为需要将变量初始化为与未定义的变量不同

请记住，angular在每次数据更改时都会重新渲染，并且您正在执行api请求（异步操作），因此在初始化组件和模板时，“employee”没有值，它在ngModel（fName）上查找某些值，这就是它打印错误的原因

然后，当api返回数据并将其存储在组件中时，模板将使用正确的值进行更新

---

如果您不想初始化员工，您可以在模板中使用异步管道，以下是使用

的文档使用
*ngIf
，以便在数据可用时呈现DOM，例如：

<div *ngIf="employee"
  <input
    type="text"
    class="form-control"
    id="fName"
    required
    [(ngModel)]="employee.fName"
    name="fName"
  />
</div>

发生这种情况是因为响应发生在视图呈现之后。此员工应具有默认值。员工：员工={id:0，fName:''，lName:''，email:''，ssn:''，通过如上初始化解决