Angular 9应用程序返回数据，但Chrome控制台显示以下错误
Angular 9应用程序返回数据，但Chrome控制台显示以下错误
提问于 2020-09-11 08:17:47
错误TypeError:无法读取未定义的属性'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>回答 2
Stack Overflow用户
发布于 2020-09-11 08:29:21
这是因为您需要将变量初始化为不同的变量，而不是未定义的变量。
请记住，angular在每次数据更改时都会重新渲染，并且您正在执行api请求(异步操作)，因此当组件初始化时"employee“没有值，而模板在ngModel (fName)上查找一些值，这就是它打印错误的原因。
然后，当api返回数据并将其存储在组件中时，模板将使用正确的值进行更新。
如果您不想初始化employee，可以在模板中使用异步管道，以下是该https://angular.io/api/common/AsyncPipe的文档
Stack Overflow用户
发布于 2020-09-11 08:32:11
使用*ngIf以便在数据可用时呈现DOM，例如：
<div *ngIf="employee"
<input
type="text"
class="form-control"
id="fName"
required
[(ngModel)]="employee.fName"
name="fName"
/>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63839213
复制相关文章
相似问题
腾讯云开发者
