Javascript Angular 4嵌套对象无法读取空值错误

我有一个来自angular service的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>

在我的接口中，地址是可选字段，设置为地址？：

请让我知道如何修复此错误，谢谢

选项#1-将

null

值显示为“” 默认情况下，如果变量或json值解析为null，Angular会将其视为空字符串，因此不会导致错误

因此，只要json键确实存在，您的代码实际上应该可以正常工作（一旦纠正了输入错误）。（但一定要检查

地址的拼写，因为您的代码中似乎有一些不一致之处）


选项#2-显示前检查值是否存在
您可以使用检查值是否存在且不为
null
。

如文档所述，解析为false的元素将从DOM中删除：

基于
{表达式}。如果指定给ngIf的表达式的计算结果为falsy
值，则该元素将从DOM中删除，否则为
元素被重新插入到DOM中

因此，在您的情况下，您的模板代码如下所示：

<tr>
    <td> {{data.name}}</td>
    <td> 
        <span *ngIf="data.address.state">{{data.address.state}}</span>
    </td>
</tr>


{{data.name}
{{data.address.state}

请注意，您需要将ngIf应用于表格单元格中的一个跨度（或其他元素），以避免破坏HTML表格。
选项#1-将
null
值显示为“”
默认情况下，如果变量或json值解析为null，Angular会将其视为空字符串，因此不会导致错误

因此，只要json键确实存在，您的代码实际上应该可以正常工作（一旦纠正了输入错误）。（但一定要检查
地址的拼写，因为您的代码中似乎有一些不一致之处）


选项#2-显示前检查值是否存在
您可以使用检查值是否存在且不为
null
。

如文档所述，解析为false的元素将从DOM中删除：

基于
{表达式}。如果指定给ngIf的表达式的计算结果为falsy
值，则该元素将从DOM中删除，否则为
元素被重新插入到DOM中

因此，在您的情况下，您的模板代码如下所示：

<tr>
    <td> {{data.name}}</td>
    <td> 
        <span *ngIf="data.address.state">{{data.address.state}}</span>
    </td>
</tr>


{{data.name}
{{data.address.state}

请注意，您需要将ngIf应用于表格单元格中的跨距（或其他元素），以避免破坏HTML表格。
Angular
？。
安全导航操作符的存在正是为了解决此问题。应在每个可能不存在的财产上使用：

   <tr>
     <td> {{data.name}}</td>
     <td> {{data.address?.state}}</td>
   </tr>


{{data.name}
{{data.address？.state}

由于在JSON中，
address
是可选的，所以在本例中应该这样处理

另一种选择是对包含缺少对象引用的元素使用
ngIf
指令，但通常在
数据
整体不可用时（例如HTTP请求正在进行时）适用。
Angular
？。
安全导航操作符的存在正是为了解决此问题。应在每个可能不存在的财产上使用：

   <tr>
     <td> {{data.name}}</td>
     <td> {{data.address?.state}}</td>
   </tr>


{{data.name}
{{data.address？.state}

由于在JSON中，
address
是可选的，所以在本例中应该这样处理

另一种选择是对包含对缺少对象的引用的元素使用
ngIf
指令，但通常在
数据
整体不可用时（例如HTTP请求正在进行时）使用该指令。
您不能只使用
ngIf
？模板中的地址拼写错误…更正了拼写错误。事实上，真正的电脑是无法从那里记录工作的，所以我必须重新键入每件事。如果在哪里？请详细说明。您不能只使用
ngIf
？模板中的地址拼写错误…更正了拼写错误。事实上，真正的电脑是无法从那里记录工作的，所以我必须重新键入每件事。如果在哪里？请详细说明。
*ngIf=“data.address.state”
将因同样的原因失败。您可能是指
*ngIf=“data.address”
*ngIf=“data.address.state”
将因同样的原因失败。您的意思可能是
*ngIf=“data.address”
。