Question

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

在我的界面地址中，可选字段设置为地址？：...

请告诉我如何修复此错误，谢谢

Answer 1

Angular ?.安全导航操作符确实存在以解决此问题。它应该用于可能不存在的每个财产：

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

由于问题是由于address在JSON中是可选的，因此在这种情况下应该如何处理。

另一种选择是对包含对缺失对象的引用的元素使用ngIf指令，但是当data整体不可用时（例如，当HTTP请求正在进行时），它通常适用。< / p>

Answer 2

选项＃1 - 将`null`值显示为“”

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

所以你的代码应该可以正常工作（一旦错误被纠正），只要json密钥确实存在。 （但请检查 address 的拼写，因为您的代码似乎存在一些不一致的地方）

选项＃2 - 在显示

之前检查值是否存在

您可以使用ngIf检查某个值是否存在，而不是null。

正如文档所说，一个解析为false的元素将从DOM中删除：

基于a删除或重新创建DOM树的一部分 {表达}。如果分配给ngIf的表达式评估为假值然后元素从DOM中删除，否则克隆元素重新插入DOM。

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

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

请注意，您需要将ngIf应用于表格单元格中的范围（或其他元素），以避免破坏游览HTML表格。