Angular 4 嵌套对象无法读取空值错误
我有一个来自 angular 服务的 json 对象。数据是这样的
data={
id: 334,
name:'Tom Miller',
address: {
street: '133 Jackson St.',
state: 'CA'
}
}
在我的模板中，我有来自我的表的以下内容
<tr>
<td> {{data.name}}</td>
<td> {{data.address.state}}</td>
</tr>
程序不会显示 zip 值，而是给出错误
TypeError: Cannot read property 'state' of null
在我的界面地址中，可选字段设置为地址？：...
请让我知道如何修复此错误，谢谢
Angular
?.
安全导航操作符正是为解决此问题而存在的。它应该用于可能不存在的每个属性：
<tr>
<td> {{data.name}}</td>
<td> {{data.address?.state}}</td>
</tr>
由于问题源于
address
在 JSON 中是可选的，因此在这种情况下应如此处理。
另一种选择是在包含对缺失对象的引用的元素上使用
ngIf
指令，但它通常适用于
data
完全不可用的情况（例如，当 HTTP 请求正在进行时）。
选项 #1 - 将
null
值显示为“”
默认情况下，如果变量或 json 值解析为 null，Angular 会将其视为空字符串，因此不会导致错误。
因此，只要该 json 键确实存在，您的代码实际上应该可以正常工作（一旦纠正了拼写错误）。
（但请检查
address
的拼写，因为您的代码中似乎存在一些不一致之处）
选项 #2 - 在显示之前检查值是否存在
您可以使用
ngIf
检查值是否存在且不为
null
。
正如文档所述，解析为 false 的元素将从 DOM 中删除：
Removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a falsy value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
因此，在您的情况下，您的模板代码将如下所示：
<tr>
<td> {{data.name}}</td>
<td>
<span *ngIf="data.address.state">{{data.address.state}}</span>
</td>
</tr>
请注意，您需要将 ngIf 应用于 span （或其他元素）在表格单元格内，以避免破坏您的 HTML 表格。