Angular：无法读取 json 对象中的属性“video_link”答案

【问题标题】：Angular: Cannot read property 'video_link' in json objectAngular：无法读取 json 对象中的属性“video_link”
【发布时间】：2018-07-10 21:47:28
【问题描述】：

所以我使用 http.get 来获取 JSON 格式的 SpaceX api。 https://api.spacexdata.com/v2/launches

我编写了一个 Launch 接口来接收所有表面级别的 JSON 值。我可以使用以下方法轻松获取它们的值：

{{ detailedLaunch$.mission_name }}

如果我想在对象中更深地存储一个值，我会创建如下语句：

{{ detailedLaunch$.links.video_link }}

当我把它放在 p 或 h2 标签中时，它会显示正确的链接！ https://www.youtube.com/watch?v=dLQ2tZEH6G0这正是我想要的！

但是，当我尝试将其作为 iframe src 插入时，会出现以下控制台错误：

ERROR TypeError: Cannot read property 'video_link' of undefined
ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

我创建了一个 Links 接口作为我的 Launch 接口的子对象。

import { Links } from './Links';

export interface Launch {
  flight_number: number;    
  mission_name?: string;     
  launch_year?: string;      
  launch_date_utc?: string;    
  telemetry?: string;          
  launch_site?: string;        
  launch_success?: boolean;    
  site_name_long?: string;     
  links: Links;                            
  details?: string;

和

export interface Links {
  mission_patch: string;
  mission_patch_small: string;
  article_link: string;
  wikipedia: string;
  video_link: string;
}

这是引发错误的确切行：

<iframe width="420" height="315" src="{{ detailedLaunch$.links.video_link }}">
        </iframe>

【问题讨论】：

您可以添加代码来为变量赋值吗？

标签： json angular object

【解决方案1】：

发出 http 请求是异步操作，所以在请求之前你的对象是一个空对象

一个例子

let o = {} ;
o.address ; // undefinde 
o.address.street ; // Cannot read property 'street' of undefined

一个简短的解决方案是在请求 json 对象时隐藏 iframe 元素

<iframe *ngIf="detailedLaunch$.links" width="420" height="315" 
        src="{{ detailedLaunch$.links.video_link }}">
</iframe>

在这种情况下，如果 detailLaunch$.links 有一个值将呈现 iframe

【讨论】：