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

Question

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

程序不会显示邮政编码值，而是给出错误

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 请求时)正在进行中)。