Angular，防止控制台出现“未定义不是评估对象……”
2021-10-11
916
我有一个角度组件，我将根据对 Nodejs 服务器的 API 调用来填充它。
此 API 返回一个类似这样的对象：
{
"data": {
"firstname": "John",
"lastname": "Doe",
"age": 34
}
}
因此我在 TS 中创建：
public data: any={};
然后我在 ngOnInit 中调用 API，它会填充数据。
我的问题是，在 HTML 文件中，当我想打印 data.firstname 时：
Your name is {{data.firstname}}
我收到此错误：
TypeError: undefined is not an object (evaluating ctx.data.firstname)
我了解到，如果我按如下方式打印名称，则不会显示该错误：
Your name is {{data?.firstname}}
但它并非在所有情况下都有效。
有没有办法解决这个问题？应用程序运行良好；我只是不喜欢在控制台上看到错误。我计划以最干净的方式构建此应用程序。
谢谢。
2个回答
通过执行此
public data: any={};
，您可以将
data
属性初始化为没有字段的对象实例。
因此，在创建组件时：
-
data永远不会未定义（因此模板中的data?.xxx是无用的） -
但
data没有firstname字段
这就是您收到错误的原因。要修复它，请将您的属性声明为
public data?: any;
并且由于您的数据将未定义，因此在 OnInit 使用正确的字段正确初始化您的属性之前，模板中的
{{ data?.firstname }>
将无法解析。
Olivier Depriester
2021-10-11
您可以尝试将 *ngIf="data" 放在包含元素上。
<div *ngIf="data && data.firstname">
<p>Your name is {{data.firstname}} {{data.lastname}}</p>
<p>Your age is {{data.age}}</p>
</div>
Fuzzy
2021-10-11